Question

我有一个带有一些输入字段的模态。我可以使用输入字段中的onChange函数，在用户输入输入时自动传递数据，如

<Input onChange={this.props.store.handleCategoryChange} type="text" />

和..（使用mobx商店，虽然相关）

@observable categoryValue;
@action handleCategoryChange = (e, data) => {
    this.categoryValue = data.value;
    e.preventDefault();
};

但是，我想添加一个功能，用户可以在其中预填充应用程序中其他位置的信息。我有预先填充输入字段的数据，但是我无法弄清楚如何在没有用户的情况下以编程方式实际输入它？

我需要调用上面的handleCategoryChange函数。但我的变量将等于data.value ..这提出了一个问题！我自己调用这个函数是不可能的，因为我不会有事件e，也没有名为data.value的值，因为我会＆＃34;只是＆＃34;传递变量本身。

在React中使用其他变量以编程方式自动填充输入字段的正确方法是什么？我需要以某种方式调用onChange函数，但输入值将不同..

Answer 1

在这种情况下使用controlled component，定义value input element属性，如下所示：

<Input value={variable_name} ....

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

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

根据DOC：

一个输入表单元素，其值由React以这种方式控制被称为＆＃34;受控组件＆＃34;。

Answer 2

传入value属性以输入：

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

Answer 3

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

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

Answer 4

好问题。我遇到了同样的问题，只是找到了解决方法。

问题在于：

您不能只使用模态组件的默认状态来设置初始输入值，因为模态会在父组件内渲染一次（从不可见开始），所以模态的默认状态将无法跟上商店中“模式”中的输入需要访问的“预填充”信息的任何更改。
您不能使用输入的value属性引用某些redux存储道具，因为需要引用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属性从false更改为true时，才使该函数启动。（我认为这是您的问题所在）。使用生命周期方法 componentDidUpdate 。每当模态改变的道具执行此操作。

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

当心

确保在componentDidUpdate中有条件，否则可能会遇到无限循环/性能问题

如果您有可能输入空值作为预填充的输入信息，请进行空检查，以免将其传递到本地状态。

希望这会有所帮助：）

如何使用React以编程方式填充输入字段值？

4 个答案: