reactjs - 在 react 中从父组件调用子组件方法

Question

我有一个名为 List 的简单组件，它是一个简单的 ul，里面有一些 li。每个 li 都是一个简单的组件。我还有其他父组件，它呈现一个输入字段和 List 组件。点击 Send 键我捕捉到输入字段的文本。例如，我想调用一个名为 handleNewText(inputText) 的函数，但此函数需要保留在 List 组件内，因为我用来填充其他 li 组件的状态位于 >列出组件。

我不想重构 List 和 MyParent 组件，将数据管理从 List 传递给 MyParent.

第一个是 parent ，第二个是 child

class TodoComp extends React.Component {
  constructor(props){
    super(props);
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }

  componentDidMpunt(){
    console.log(this._child.someMethod());
  }


  handleKeyPress(event){
    if(event.key === 'Enter'){
      var t = event.target.value;

    }
  }

  render(){
    return (
        <div>
          <input
            className="inputTodo"
            type="text"
            placeholder="want to be an hero...!"
            onKeyPress={this.handleKeyPress}
          />
          <List/>
        </div>
    );
  }

}


export default class List extends React.Component {
  constructor() {
    super();
    this.flipDone = this.flipDone.bind(this);
    this.state = {
      todos: Array(3).fill({ content: '', done: false})
    };
  }

  flipDone(id) {
    let index = Number(id);

    this.setState({
      todos: [
        ...this.state.todos.slice(0, index),
        Object.assign({}, this.state.todos[index], {done: !this.state.todos[index].done}),
        ...this.state.todos.slice(index + 1)
      ]
    });
  }

  render() {

    const myList = this.state.todos.map((todo, index) => {
      return (
        <Todo key={index}
              clickHandler={this.flipDone}
              id={index}
              todo={todo}
              handleText={this.handleText}
        />
      );
    })

    return (
      <ul className="list">
        {myList}
      </ul>
    );
  }


ReactDOM.render(<TodoComp />,document.getElementById('myList'));

Answer 1

你需要利用refs从父组件调用子组件中的函数

将父级的列表组件渲染为

<List ref="myList"/>

然后访问 handleNewText() 函数作为 this.refs.myList.handleNewText()

更新:

React 不再推荐字符串引用，您应该使用引用回调，查看 this

<List ref={(ref) => this.myList=ref}/>

然后像这样访问子函数

this.myList.handleNewText()