如何以编程方式使用 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 函数，但输入值会不同..

原文由 cbll 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 <Input value={variable_name} ....

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

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

根据 文档：

一个输入表单元素的值通过这种方式被 React 控制，我们称之为“受控组件”。

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

传入 value 属性进行输入：

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

原文由 Ashh 发布，翻译遵循 CC BY-SA 4.0 许可协议