小编典典

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

reactjs

我有一些输入字段的模态。通过使用onChange输入字段中的功能,用户可以通过键入输入轻松地自动传递数据,如下所示:

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

和..(虽然使用mobx商店,但irellevant)

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

但是,我想添加一个功能,用户可以在其中使用应用程序中其他位置的信息预填充此功能。我有数据可以用来预先填充输入字段,但是我想不知道如何在没有用户执行的情况下以编程方式实际输入它?

我需要调用上面的handleCategoryChange函数。但是我的变量等于data.value..这就带来了问题!我自己无法调用此函数,因为我将没有该事件,e也不会调用一个值,因为我将自己data.value“只是”传递一个变量。

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


阅读 241

收藏
2020-07-22

共1个答案

小编典典

在这种情况下使用受控组件,定义如下value属性input element

<Input value={variable_name} ....

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

现在,您可以通过向分配一个值来填充一些默认值variable_name,用户可以按onChange功能更新该值。

根据DOC

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

2020-07-22