Question

我想使用州和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()。

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

我想知道我所做的是否正确，任何意见或答案都将受到赞赏。

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

您可以在setState中_handleChange。但是，您需要绑定到本地州的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 一看。

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

3 个答案: