Question

我有两个组成部分：ParentComponent和ChildComponent。

ChildComponent有一个input[type="text"]元素，当它更改其文本时，该事件会通过事件ParentComponent和change侦听器传播到onChange

下面的代码简化了一个更大的问题，这就是为什么您会看到此处突出显示一些要求的原因。

我的问题是我需要在函数change中触发handleClick事件。我做了一些运气不好的实验。

在这里，您可以尝试使用代码沙箱（请提供一种使用方法的分支）：

这里有代码：

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

ChildComponent.js

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

关于如何使它工作的任何想法？

谢谢！

Answer 1

您缺少输入更改的踪迹，

因为当您将输入的value属性设置为跟踪节点的值。调度更改事件时，它对照当前值检查它的最后一个值，如果它们是同样，它不会调用任何事件处理程序（因为未进行任何更改就反应而言）。所以我们必须以某种方式设置值 React的value setter函数将不会被调用，这就是 setNativeValue起作用。

此处您是在设置状态，而不是直接更改输入的值，因此，在调度事件时它将不会获取更新的值。如果直接像.dropWhile{ ... }.next._3.reverse那样写值，它就无法跟踪输入的更改。

因此，您应该设置值并调度事件，这样，在调度事件时，您可以获取更新的值。

这是reference和another的链接，还有其他方法可以触发变更事件。

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

input.value

Demo

Answer 2

如果我的理解正确，那么您在单击子组件中的按钮时会尝试更改诸如Hello Peter之类的父文本。

检查我的密码和框：codesandbox

更改：

在子组件中，传递诸如this.props.onClick(name);之类的道具

在父级中，就像

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

希望这会对您有所帮助。

Answer 3

您可以在父组件中包括一个onClick函数，以更改状态并将其传递给子组件。在子组件中，您可以调用通过props传递的onClick方法，并在单击按钮时传递名称。

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

https://codesandbox.io/s/k0n1j2rrx7

Answer 4

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

 this.props.onChange(name);

为什么要进行这些更改，因为您从childComponent的onChange函数调用了parentComponent的handleChange函数。当您单击按钮时，它将调用handleClick函数。在handleClick函数中，它调用属性onChange函数。 props.onChange函数调用父组件的handleChange函数。 handleClick-> this.props.onChange（名称）-> this.handleChange（名称）希望对您有所帮助。

反应-无法以编程方式从输入文本元素调度onChange事件

4 个答案: