Question

我是React的新手，为此在堆栈溢出时找不到任何东西。我无法从父组件调用事件处理程序。但是如果我将ZipSearchField内的内容复制并粘贴到App父组件中（并将其更改为道具），它将按预期工作。下面的代码：

如果不清楚，我想处理父组件中的更改，但似乎无法这样做。它永远不会被调用，并且在任何地方都没有错误。

function ZipSearchField(props) {
  return (
    <div className="container-search-bar">
    <form>
      <label>
          <input type="text" placeholder="Try 11223..." onChange={props.handleChange}/>
      </label>
    </form>
    </div>
  );
}

class App extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    console.log("things changed")
  }

  render() {
    return (
        <div className="App">
          <div className="App-header">
            <h2>Zip Code Search</h2>
          </div>
          <ZipSearchField onChange={this.handleChange}/>
        </div>
    );
  }
}

抱歉，这是一个愚蠢的问题，谢谢！

Answer 1

在Sudhakar RS的评论中得到解答。

在子组件内部，您无需调用该函数，而是将onChange钩子链接到父级的onChange钩子。

所以孩子看起来像这样：

function ZipSearchField(props) {
  return (
    <div className="container-search-bar">
    <form>
      <label>
          <input type="text" placeholder="Try 11223..." onChange={props.onChange}/>
      </label>
    </form>
    </div>
  );

谢谢！

在子组件和父组件之间进行事件处理

1 个答案: