如何使用 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

在这种情况下使用controlled component，像这样定义input element 的value 属性：

<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 })}/>

Answer 3

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

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

Answer 4

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

问题是：

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

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

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

再次注意，打开 Modal 并不是渲染 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 步： 仅当模式 更改 从 false 到 true 的 isOpen 属性时触发该函数。 （我认为这是你问题的核心）。 使用生命周期方法componentDidUpdate。这将在每次模态的道具发生变化时执行。

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

小心

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

希望这会有所帮助:)

Answer 5

如何在 React 或 useState Hooks 中以编程方式预填充、填充或更新输入字段值？

首先 - 从数据库中获取和定义数据

const **yourData** = isDataFromDatabase;

或者如果数据存储在 Redux 中，那么...

const **yourData** = useSelector(isDataFromDatabase);

其次 - 将其附加为 useState 挂钩的默认值

const [isDataValue, setIsDataValue] = useState(**yourData**);

第三 - 创建一个函数来观察和更新用户对您的数据值所做的更改，并将其设置为上面创建的 useState 挂钩

/** handles Your Data Value */
const handleDataValue = (text) => {
 setIsDataValue(text);
};

最后 - 在您的输入标签中，使用 useState State 作为“Value”参数，以便可以使用 onChange 函数对其进行更新

<input
 className="css"
 id="myDataInput"
 type="text"
 value={isDataValue}
 placeholder={isDataValue}
 onChange={(e) => handleDataValue(e.target.value)}
/>

现在，当您加载组件时，预填充的值将显示并可以在 HTML 输入字段中更新。

仅此而已。