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

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因为我会“只是”自己传递一个变量。

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

Answer 1

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

<Input value={variable_name} ....

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

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

根据DOC：

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

Answer 2

传入 value 属性以进行输入：

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