从JavaScript或JQuery设置React输入字段值

Question

如何以编程方式设置React生成的输入字段的值,使用vanilla JS还是JQuery？

我尝试过以下内容似乎没有任何效果.

$(obj).val('abc');
$(obj).attr('value', 'abc');
$(obj).keydown();
$(obj).keypress();
$(obj).keyup();
$(obj).blur();
$(obj).change();
$(obj).focus();

我也试图模拟keyPress(如此处所示)事件,但它似乎也没有用.

simulateKeyPresses (characters, ...args) {
  for (let i = 0; i < characters.length; i++) {
    this.simulate('keyPress', extend({
      which: characters.charCodeAt(i),
      key: characters[i],
      keyCode: characters.charCodeAt(i)
    }, args));
  }
}

Answer 1

在所有的答案中，经过大量的谷歌搜索，我发现这是有效的

function changeValue(input,value){

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      "value"
    ).set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
}

我们正在使用 window.HTMLInputElement.prototype，即 HTMLInputElement。一个界面，提供用于操作输入元素的选项、布局和呈现的特殊属性和方法。

然后我们将使用 Object.getOwnPropertyDescriptor() 方法来设置输入值。最后，我们将在输入上调度更改事件以使用 React onChange 进行模拟

这里是这个答案的详细解释：https : //hustle.bizongo.in/simulate-react-on-change-on-Controlled-components-baa336920e04

Answer 2

正如在模拟部分的react test utils文档中展示的那样,您可以看到他们基本上正在做的是更改DOM节点值然后触发输入事件.

您可以做的是类似下面的内容,使用您的输入DOM元素和新值调用它.

const changeValue = (element, value) => {
  const event = new Event('input', { bubbles: true })
  element.value = value
  element.dispatchEvent(event)
}

取决于您如何定义组件,例如,如果您期望输入按键,则必须调度匹配事件.

Answer 3

您可以使用状态直接更新文本字段的值。

设状态下文本输入的值为：

state = {
   textInputValue: ""
};

这就是在 React 中定义文本输入的方式

<input type="text"
  className="form-control"
  name="my-text-input"
  placeholder="text"
  value={this.state.textInputValue}
  onChange={this.onTextInputChange}
/>

定义文本输入后，您可以通过仅更改this.setState({textInputValue: 'MyText'})反应组件内的状态来更新文本输入的值。之后，您通常可以使用以下命令更新文本字段的值

onTextInputChange(event) {
    let newText = event.target.value;
    return this.setState({textInputValue: newText});
}

我不知道你面临着什么样的场景。由于 React 创建并维护自己的虚拟 DOM，因此您无法从 React 外部使用 Jquery 或 Javascript 操作 DOM 元素。但是，如果您需要从外部获取数据，请在 React 组件中使用 componentWillMount() 编写代码，从所需的数据源获取数据并将其设置为 TextInput 的状态

componentWillMount() {
    // Code to get your data into variable 'defaultTextValue'
    this.setState({textInputValue: defaultTextValue});
}