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

如何使用vanillaJS或JQuery以编程方式设置React生成的输入字段的值

我尝试了以下方法，但似乎没有任何效果

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

我还尝试模拟

按键

（如建议的）事件，但它似乎也不起作用

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

SimulateKeyPress（字符，…参数）{
for（设i=0；i

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

让状态中输入的文本值为：

state = {
   textInputValue: ""
};

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

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

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

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

根据这一点，您可以从dom中获取react实例

假设

obj

是一个dom元素

function findReact(dom) {// from https://stackoverflow.com/a/39165137/4831179
    for (var key in dom) {
        if (key.startsWith("__reactInternalInstance$")) {
            var compInternals = dom[key]._currentElement;
            var compWrapper = compInternals._owner;
            var comp = compWrapper._instance;
            return comp;
        }
    }
    return null;
};

var instance = findReact(obj);

console.log(instance.state);//try to modify the form and check what's here

instance.setState({
//the state name from the previous step
});

instance.submit();//something like this

---

这取决于浏览器，但对于文本输入，

onChange

调用正在侦听

input

事件

element.value = 'new value';
var event = new Event('input', { bubbles: true });
element.dispatchEvent(event);

---

尝试重新分配整个html内容，如

 $("html").on("DOMNodeInserted DOMNodeRemoved change", "body", function(){
     $("body").html($("body").html()); 
 });

 // or call a simple function with $("body").html($("body").html());

我这样做是为了在原始代码注入后重新分配html并在jquery中的svg标记上再次应用事件。。。也许这也适用于这个案子

---

也可以在事件上尝试.on（）方法。

如中的react test utils文档所示，您可以看到它们的基本操作是更改DOM节点值，然后触发输入事件

您可以做如下操作，使用输入DOM元素和新值调用它

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

---

不过，这取决于您如何定义组件，例如，如果您希望使用enter键，则必须调度匹配事件。

您可以通过使用ReactDOM（）和Jquery来实现这一点，像这样操作并不常见，但它可以工作：

var ctx = this; 
//Save the context of your class to the variable ctx, since inside $/Jquery the this is a reference to $/Jquery itself.
$(ReactDOM.findDOMNode(ctx.refs.myInput)).val('abc');

您的输入必须具有ref属性才能找到它：

<input type="text"
  className="form-control"
  ref="myInput"
  placeholder="text"
/>

---

我制作了一个代码笔，上面有一个我相信Dani Akash想说的工作示例。重要的是要知道，在React中，

setState（）

会导致组件重新渲染，因此在我的示例中，会将新状态作为道具传递给子组件

首先，我渲染我创建的

父组件。
父组件包含一个按钮和我创建的另一个React组件
InputWithButton

首先调用

Parent

构造函数，将

Parent

组件状态设置为对象

{value:“initial value”}

setValueInParent

是一个单击处理程序，我绑定到

Parent

组件中的按钮。它设置导致重新加载的父组件状态

Parent

组件将其

状态值作为道具传递给
InputWithButton
组件

InputWithButton

组件与父组件非常相似。尽管如此，在构造函数中，它将状态值设置为从父级传入的值prop

除此之外，

InputWithButton

组件的工作方式与

父组件的工作方式大致相同

---

这使您能够通过在输入字段中键入、单击与输入字段相同组件中的按钮，并将新值作为来自家长的道具传入来更改输入值。

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

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（）方法设置输入值。最后，我们将在输入上调度change事件，以使用React onChange进行模拟

---

下面是对此答案的详细解释：

我在使用JQuery构建的另一个框架中使用React时遇到了同样的问题。 但就我而言，我只需要改变一个领域。请检查是否适合您：

import React，{useffect，useRef}来自“React”；
常量示例=（）=>{
const[value，setValue]=useState（）；
const inputRef=useRef（null）；
useffect（（）=>{
const myInputRef=inputRef.current；
myInputRef.onchange=e=>setValue（e.target.value）
}, [])
返回(
);
}
导出默认示例；

这是一个经过良好测试的解决方案，适用于IE11以及其他浏览器。我想，正是createNewEvent将此解决方案与这里的其他解决方案区分开来。

setReactValue

方法还返回更改后的值

function setReactValue(element, value) {
  let lastValue = element.value;
  element.value = value;
  let event = createNewEvent("input", element);
  event.simulated = true;
  let tracker = element._valueTracker;
  if (tracker) {
    tracker.setValue(lastValue);
    element.dispatchEvent(event);
  }
  return lastValue;
}

function createNewEvent(eventName, element) {
    let event;
    if (typeof(Event) === 'function') {
        event = new Event(eventName, {target: element, bubbles:true});
    } else {
        event = document.createEvent('Event');
        event.initEvent(eventName, true, true);
        element.addEventListener(eventName, function(e) {
          e.target = element;
        });
    }
    return event;
}

---

React使用虚拟DOM，因此将其与JQuery（即DOM操作）混合使用不是一个好的做法。尝试构造数据模型并使用视图对其进行插值，然后在任何时候使用控制器更改模型都会自动反映到视图中。这就是我们所说的前端MVC谢谢@SaJed，很不幸我没有访问虚拟DOM的权限，所以我正在寻找一种从浏览器触发其刷新的方法。你能解释一下为什么你没有访问虚拟DOM的权限吗？您不是最初的开发人员，您正在尝试进行一些仅客户端的自动化吗？确切地说@swyx，我不是开发人员，它只是客户端自动化。我只是尝试了：$（“.class input”）[0]。value=“woah”；它成功了。。。不知道什么事件。。。但是价值观很有效谢谢@Dani！不幸的是，我没有访问虚拟DOM的权限，所以我正在寻找一种从浏览器触发其刷新的方法

function setReactValue(element, value) {
  let lastValue = element.value;
  element.value = value;
  let event = createNewEvent("input", element);
  event.simulated = true;
  let tracker = element._valueTracker;
  if (tracker) {
    tracker.setValue(lastValue);
    element.dispatchEvent(event);
  }
  return lastValue;
}

function createNewEvent(eventName, element) {
    let event;
    if (typeof(Event) === 'function') {
        event = new Event(eventName, {target: element, bubbles:true});
    } else {
        event = document.createEvent('Event');
        event.initEvent(eventName, true, true);
        element.addEventListener(eventName, function(e) {
          e.target = element;
        });
    }
    return event;
}