reactjs - 如何检索反应组件值

Question

我正在尝试使用我自己的效果在 React 上制作我自己的自定义输入[type='text']。

为此，我创建了我的组件： Textbox.js

import React from "react";

class Textbox extends React.Component {
  constructor(props) {
    super();
    this.state = {
      inputValue: props.value,
      fieldActive: false,
      label: props.label,
      placeholder: props.placeholder,
      type: props.type,
      maxLength: props.maxLength,
      error: false,
      required: props.required,
      inputChange: props.onChange,
      id: props.id,
      valid: !props.required,
      submitted: props.submitted,
      _value: props.value,
      updated: false
    };
    //console.log(this.props);

    this.updateInputValue = this.updateInputValue.bind(this);
    this.activateField = this.activateField.bind(this);
    this.disableFocus = this.disableFocus.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      fieldActive: (nextProps.value != ''),
      inputValue: nextProps.value
    });
  }

  componentWillUpdate(nextProps, nextState) {
    //console.log(nextState.inputValue);

    if(/*this.state.inputValue != this.props.value*/ this.props.value != '' && !this.state.updated ){
      this.setState({
        inputValue: nextProps.value,//this.props.value,
        updated: true,
        fieldActive: true
      });
    }
  }

  componentDidUpdate(prevProps) {
    //console.log('updating value: ' + prevProps.submitted);
    if (this.props.submitted !== undefined) {
      if (this.props.submitted !== prevProps.submitted) {
        if(!this.state.required) return;
        this.setState({
          error: this.state.required && this.state.inputValue == ""
        });
      }
    }
  }

  activateField() {
    this.setState({
      fieldActive: true
    });
  }

  disableFocus(e) {
    if (e.target.value == "") {

      this.setState({
        fieldActive: false,
        error: this.state.required,
        valid: !this.state.required
      });
    } else {
      this.setState({
        error: false
      });
      if (this.state.type == "email") {
        this.setState({
          error: !/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(e.target.value)
        });
      }
    }
  }

  updateInputValue(e) {
    //console.log('writing: ' + e.target.value);
    this.setState({
      inputValue: e.target.value,
      submitted: false,

    });
    //this.props.value = e.target.value

    if (this.state.inputChange != undefined && this.state.inputChange != null)
      this.state.inputChange(e.target.id, e.target.value, this.state.valid);

    this.activateField(e);
    e.preventDefault();
  }

  render() {
    return (
      <div className="form-group field-group">
        <label
          htmlFor=""
          className={
            this.state.fieldActive
              ? this.state.error
                ? "field-active form-label floating error"
                : "field-active form-label floating"
              : "form-label floating hide"
          }
        >
          {this.props.label}
        </label>
        <input
          className={
            this.state.error
              ? "form-input floating-label error"
              : "form-input floating-label"
          }
          type={this.props.type}
          placeholder={this.props.placeholder}
          maxLength={this.props.maxLength}
          value={this.state.inputValue}
          name={this.props.id}
          id={this.props.id}
          autoComplete="off"
          onFocus={this.activateField}
          onBlur={this.disableFocus}
          onChange={this.updateInputValue}
        />
        <label
          className={this.state.error ? "error" : "error hide"}
          style={{ fontSize: 14, fontWeight: 400 }}
        >
          You must complete this field
        </label>
      </div>
    );
  }
}

export default Textbox;

myjsfile.js

constructor(props) {
    super(props);
    this.state = {
      clients: [],
      client: {
        name: "",

      },

    };
//... More methods and properties

    <Textbox
                      label="Client name"
                      placeholder="Client name / Customer"
                      id="name"
                      type="text"
                      required={true}
                      value={this.state.client.name}
                      maxLength="20"
                      //onChange={this.handleChange}
                      submitted={this.state.submitted}
                    />

在我的文件中，我将Textbox其用作组件，但每次我想检索Textbox我得到的empty.

我究竟做错了什么？为什么值不更新？我该如何解决？

标签： reactjs