反应：使字段可编辑，也可以从外部更新

Question

对于在React组件中具有电话号码字段的表单，我遇到这样的情况：可以从该输入之外更改电话号码（在这种情况下，它来自位于模态窗口中的Non-React组件）。 模态窗口将其值写入Redux存储，并且React组件中的输入字段可以读取该值（通过react-redux与'connect'连接）。

因此，我尝试了：

反应组件

此方法使字段不可编辑/只读：

<input type="text" value={phoneNumber} />

在商店中更改值后，此方法不会更新该值：

<input type="text" defaultValue={phoneNumber} />

现在，我希望能够更新React组件中的电话号码，并使其与Redux商店保持同步，但是解决该问题的方法是什么？

Answer 1

只要确保变量valueFromRedux是正确的，并在保存时将其同步回Redux。

class Component extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            phoneNumber: valueFromRedux
        }
        this.onChangeHandler = this.onChangeHandler.bind(this);
    }

    onChangeHandler(event) {
        this.setState({
            phoneNumber: event.target.value
        });
    }

    render() {
        const { phoneNumber } = this.state;
        return <input type="text" value={phoneNumber} onChange={this.onChangeHandler} />;
    }

}

Answer 2

我建议您使用controlled input ，以使数据保持组件state 。 为此，您应该像以下示例一样进行操作。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

从React文档复制的代码-受控组件

您可以在这里采取行动，

1. 使用handleChange ，每次输入字段时都会调用该方法。
2. 使用handleSubmit ，一旦您提交（推荐） ，它将被调用

使用组件状态下的数据将其传递给操作。 如果您使用第二种方法，那么如果用户提交表单，那么您的商店调用将只有一次。 这是首选方法，因为每个操作调用都非常昂贵，并且如果存储空间增大，可能会降低应用程序的性能。