在这种情况下使用受控组件，定义这样的value属性input element：

<Input value={variable_name} ....

每当您更新该变量时，该值将自动填充到输入元素中。

现在您可以通过分配一个值来填充一些默认值variable_name，用户可以通过onChange函数更新该值。

根据DOC：

其值以这种方式由 React 控制的输入表单元素称为“受控组件”。

传入 value 属性进行输入：

<input type="text" value={this.state.value} onChange={(e) => {this.setState({value: e.target.value })}/>

您可以使用受控组件并将值传递给它。

<input type="text" value{this.state.value} 
       onChange={()=>  {this.setState({value:e.target.value })}}

好问题。我遇到了同样的问题，刚刚找到了解决方案。

问题在于：

• 不能只使用 modal 组件的默认状态来设置初始输入值，因为 modal 在父组件内渲染一次（开始不可见），所以 Modal 的默认状态不会跟上任何变化模态中的输入需要访问的商店中的“预填充”信息。
• 您不能使用输入的 value 属性来引用某些 redux store prop，因为需要引用 onChange 函数，以便用户可以更改该预填充信息。
• 并且，您不能使用 onChange 函数来设置初始值，因为需要使用用户更改来更新本地状态 - 而不是设置初始值。无论如何，这需要用户单击某些内容，并且您希望在模态打开后用户立即执行任何操作之前预填充模态输入......

所以。我们需要的是每次 Modal 属性 isModalOpen（或任何您使用的）更改时更新这些输入字段。

（即，在打开 Modal 时预先填充字段）。

再次注意，打开模态并不是渲染模态，它已经被渲染过一次，并且一直处于不可见状态，直到 isModalOpen 属性更改为 true。

解决方案：

步骤1：在Modal组件中创建一个处理函数，通过更新Modal组件的本地状态来预填充输入数据。我的看起来像这样：

handlePreFillModalInputsOnOpen = () => {
    this.setState(() => ({
        orthForm: this.props.matchLexUnit['orthForm'],
        orthVar: this.props.matchLexUnit['orthVar'],
        oldOrthForm: this.props.matchLexUnit['oldOrthForm'],
        oldOrthVar: this.props.matchLexUnit['oldOrthVar'],
        source: this.props.matchLexUnit['source'],
        namedEntityCheck: this.props.matchLexUnit['namedEntityCheck'],
        styleMarkingCheck: this.props.matchLexUnit['styleMarkingCheck'],
        artificialCheck: this.props.matchLexUnit['artificialCheck'],
        error: ''
    }));
};

第2步：作出这样的功能火灾只有当模态就是isOpen属性的变化，从虚假到真实的。（我认为这是你问题的核心）。使用生命周期方法componentDidUpdate。这将在每次模态的props改变时执行。

componentDidUpdate(prevProps) {
    if (this.props.isModalOpen === true && prevProps.isModalOpen === false) {
        this.handlePreFillModalInputsOnOpen();
    }
}

小心

• 确保在 componentDidUpdate 中有条件，否则可能会遇到无限循环/性能问题
• 如果您有可能将空值作为预填充的输入信息传入，请进行空检查，以免它们被传递到本地状态。

希望这可以帮助 ：）