Javascript React-无法通过编程方式从输入文本元素分派onChange事件

我有两个组件：

ParentComponent

和

ChildComponent

ChildComponent

有一个

input[type=“text”]

元素，当它更改文本时，事件通过事件

change

和

onChange

侦听器传播到

ParentComponent

下面的代码是对一个更大问题的简化，这就是为什么您会在这里看到一些突出显示的需求

我的问题是我需要在函数中触发

change

事件：

handleClick

。我做了一些实验，但运气不好

在这里，您可以尝试使用代码沙盒（请为您的方法提供一个fork）：

这里有代码：

ParentComponent.js

import React from "react";
import ChildComponent from "./ChildComponent";

export default class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Peter"
    };
  }
  handleChange = event => {
    let target = event.target;
    let value = target.value;
    this.setState({
      name: value
    });
  };
  render() {
    return (
      <div>
        <ChildComponent value={this.state.name} onChange={this.handleChange} /><br />
        <span>Hello</span>&nbsp;
        <span>{this.state.name}!</span>
      </div>
    );
  }
}

import React from "react";
import ReactDOM from "react-dom";

export default class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value
    };
  }
  handleChange = event => {
    const name = event.target.value;
    this.setState({ value: name });
    if (this.props.onChange !== undefined) {
      this.props.onChange(event);
    }
  };
  handleClick = name => {
    const inputName = this.refs.name;
    console.log('Name before being changed: ' + inputName.value); // this works
    // PROBABLY HERE IS WHERE THE CODE NEEDS TO BE MODIFIED
    this.setState({ value: name });
    var event = new Event('input', { bubbles: true });
    inputName.dispatchEvent(event); // this doesn't propagate the event to the parent
  };
  render() {
    return (
      <div>
        {"Your name: "}
        <input type="text"
          value={this.state.value}
          onChange={this.handleChange}
          ref="name"
        />
        {/* requirement: the following 2 lines cannot be modified */}
        <button onClick={e => { this.handleClick("Steve"); }}>Steve</button>
        <button onClick={e => { this.handleClick("Emily"); }}>Emily</button>
      </div>
    );
  }
}

从“React”导入React；
从“/ChildComponent”导入ChildComponent；
导出默认类ParentComponent扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
姓名：“彼得”
};
}
handleChange=事件=>{
让target=event.target；
让value=target.value；
这是我的国家({
名称：value
});
};
render（）{
返回(


你好
{this.state.name}！
);
}
}

ChildComponent.js

import React from "react";
import ChildComponent from "./ChildComponent";

export default class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Peter"
    };
  }
  handleChange = event => {
    let target = event.target;
    let value = target.value;
    this.setState({
      name: value
    });
  };
  render() {
    return (
      <div>
        <ChildComponent value={this.state.name} onChange={this.handleChange} /><br />
        <span>Hello</span>&nbsp;
        <span>{this.state.name}!</span>
      </div>
    );
  }
}

import React from "react";
import ReactDOM from "react-dom";

export default class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value
    };
  }
  handleChange = event => {
    const name = event.target.value;
    this.setState({ value: name });
    if (this.props.onChange !== undefined) {
      this.props.onChange(event);
    }
  };
  handleClick = name => {
    const inputName = this.refs.name;
    console.log('Name before being changed: ' + inputName.value); // this works
    // PROBABLY HERE IS WHERE THE CODE NEEDS TO BE MODIFIED
    this.setState({ value: name });
    var event = new Event('input', { bubbles: true });
    inputName.dispatchEvent(event); // this doesn't propagate the event to the parent
  };
  render() {
    return (
      <div>
        {"Your name: "}
        <input type="text"
          value={this.state.value}
          onChange={this.handleChange}
          ref="name"
        />
        {/* requirement: the following 2 lines cannot be modified */}
        <button onClick={e => { this.handleClick("Steve"); }}>Steve</button>
        <button onClick={e => { this.handleClick("Emily"); }}>Emily</button>
      </div>
    );
  }
}

从“React”导入React；
从“react dom”导入react dom；
导出默认类ChildComponent扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：this.props.value
};
}
handleChange=事件=>{
const name=event.target.value；
this.setState（{value:name}）；
if（this.props.onChange！==未定义）{
this.props.onChange（事件）；
}
};
handleClick=name=>{
const inputName=this.refs.name；
console.log（'更改前的名称：'+inputName.value）；//这有效
//这里可能就是代码需要修改的地方
this.setState（{value:name}）；
var event=new事件（'input'，{bubbles:true}）；
inputName.dispatchEvent（事件）；//这不会将事件传播到父级
};
render（）{
返回(
{“你的名字：”}
{/*要求：以下两行不能修改*/}
{this.handleClick（“史蒂夫”）；}>史蒂夫
{this.handleClick（“Emily”）；}>Emily
);
}
}

你知道怎么让它工作吗

---

谢谢

如果我理解正确，当您单击子组件中的按钮时，您正在尝试更改父文本，如

Hello Peter

检查我的代码沙盒：

更改：

在子组件中，传递一个props，如

this.props.onClick（name）

在“家长”中，要像

  handleClick = name => {
    this.setState({
      name
    });
  };

希望这将对您有所帮助。
您可以在父组件中包含onClick函数，以更改状态并将其传递给子组件。在子组件中，您可以调用通过props传递的onClick方法，并在单击按钮时传递名称

您可以在下面提供的链接中找到示例代码

您缺少输入更改的轨迹

因为当您将输入的value属性设置为
跟踪节点的值。当您发送更改事件时，它
检查它的最后一个值与当前值，以及它们是否为
同样，它不调用任何事件处理程序（因为没有发生任何更改）
就反应而言）。因此，我们必须以某种方式设置值
React的value setter函数将不会被调用，这就是
setNativeValue开始起作用

在这里，您设置的是状态，而不是直接更改输入的值，这样，当您调度事件时，它将不会获得更新的值。如果您像
input.value
那样直接写入值，则无法跟踪输入的变化

因此，您应该设置值并分派事件，这样您可以在分派事件时获得更新的值

这是的链接，还有其他方法可以触发更改事件

这是您需要设置属性的函数，以便react可以跟踪更改

  handleClick = name => {
    const inputName = this.refs.name;
    console.log("Name before being changed: " + inputName.value); // this works

    var event = new Event("input", { bubbles: true });

    this.setNativeValue(inputName, name);
    inputName.dispatchEvent(event);
  };

  setNativeValue = (element, value) => {
    const valueSetter = Object.getOwnPropertyDescriptor(element, "value").set;
    const prototype = Object.getPrototypeOf(element);
    const prototypeValueSetter = Object.getOwnPropertyDescriptor(
      prototype,
      "value"
    ).set;

    if (valueSetter && valueSetter !== prototypeValueSetter) {
      prototypeValueSetter.call(element, value);
    } else {
      valueSetter.call(element, value);
    }
  };

我这样更正了您的代码：
在parentComponent的handleChange函数中，我将参数更改为事件中的值。
在childComponent中，我向handleClick函数添加了以下函数调用：

 this.props.onChange(name);

我之所以做这些更改，是因为您从您的子组件的onChange函数调用了父组件的handleChange函数。
单击该按钮时，将调用handleClick函数。在handleClick函数中，它调用属性onChange函数。props.onChange函数调用父组件的handleChange函数。
handleClick->this.props.onChange（名称）->this.handleChange（名称）
我希望它能有所帮助。
您的沙盒链接正在运行，实际上，您想做什么？当您单击按钮时：
Steve
/
Emily
父组件上的名称未更新检查此@Justcode父组件在子组件上单击按钮时未更新下面的文本：
Steve
/
Emily
。我需要将事件传递给父组件。@PraveenRaoChavan.G我在那里尝试了这种方法，但没有成功，下面是我的尝试：。您能在codesandbox.io上提供一些代码分支吗？