使用状态响应更新输入文本值并使其可变

Question

我想使用 state 和 React value 属性更改输入文本值，并使该字段可编辑。

我的组件的构造函数：

constructor(props) {
    super(props);

    // States
    this.state = {
        value: this.props.object.subtext
    };

    this._handleChange = this._handleChange.bind(this);
}

我的render() 功能：

return (
    <input
        type={this.props.object.type}
        value={this.props.object.subtext}
        onChange={this._handleChange}
    />
);

componentDidUpdate()函数：

componentDidUpdate() {
    if (this.state.value !== this.props.object.subtext) {
        this.setState({value: this.props.object.subtext});
    }
}

对于_handleChange(e) 函数：

_handleChange(e) {
    this.props.object.subtext = e.target.value;
    this.componentDidUpdate(); // not sure it's right or not
}

代码运行良好，但我有点不确定这是不是最佳实践，因为我在事件处理函数中手动调用了this.componentDidUpdate()。

我这样做是为了修复我之前的错误，即当状态改变时输入组件的值不会被更新。

我想知道我所做的是否正确，任何 cmets 或答案将不胜感激。

Answer 1

不，自己调用生命周期函数不是一个好习惯

除此之外，您可以修改您的状态道具，例如

constructor(props) {
    super(props);

    // States
    this.state = {
        value: this.props.object.subtext
    };

    this._handleChange = this._handleChange.bind(this);
}
componentWillReceiveProps(nextProps) {
    if (this.props.object.subtext !== nextProps.object.subtext) {
        this.setState({value: nextProps.object.subtext});
    }
}
_handleChange(e) {

    //cal a parent compoent function
    this.props.changeProps(e.target.value);
}

Answer 2

正如您所怀疑的那样，致电componentDidUpdate 是个坏主意。您可以在_handleChange 中更改您的状态并删除componentDidUpdate 调用。

Answer 3

您可以在_handleChange 中setState。但是，您需要为您当地的州绑定到this.state.value，而不是this.props.object.subtext。请注意以下...

constructor(props) {
  super(props);

  this.state = {
    value: this.props.object.subtext
  };
}

_handleChange(e) {
  this.setState({
    value: e.target.value
  });
}

render() {
  return (
    <input
      type={this.props.object.type}
      value={this.state.value}
      onChange={this._handleChange.bind(this)}
    />
  );
}

或者，如果您正在寻找没有本地状态的仅props 解决方案，我建议您提供redux 看看。