Question

我有一个名为 List 的简单组件，它是一个简单的 ul ，里面有一些 li 。每个 li 都是一个简单的组件。我有其他父组件，它呈现一个输入字段和列表组件。点击发送键我会捕获输入字段的文本。我想调用一个名为 handleNewText（inputText）的函数，但是这个函数需要保留在List组件中，因为我用来填充其他 li 组件的状态存在于列表组件。

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

首先是父母，第二个是孩子

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组件呈现为

<List ref="myList"/>

然后以handleNewText()

的身份访问this.refs.myList.handleNewText()函数

<强>更新

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

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

然后访问子函数，如

this.myList.handleNewText()

Answer 2

添加到@ shubham-khatri解决方案：

如果您引用已连接的子组件...

一个。那个孩子必须在（第4个）配置参数中说withRef: true：

@connect(store => ({
    foo: store.whatever
    …
}),null,null,{ withRef: true })

湾访问权限是getWrappedInstance()（注意，getWrappedInstance也需要调用()）

getWrappedInstance().howdyPartner()

Answer 3

当功能组件问世时，我开始学习React。我尝试成功的另一种方法是返回要作为JSON中的闭包访问的函数。我喜欢这种方法，因为闭包是Javascript的构造，即使React再一次更新，它也应该可以正常工作。以下是子组件的示例

function Child(){
    //declare your states and use effects
    const [ppp, setPPP] = useState([]);
    const [qqq, setQQQ] = useState(2);
    //declare function that you want to access
    function funcA(){ /*function to interact with your child components*/}
    function funcB(){ /*function to interact with your child components*/}

    //pure React functional components here
    function Content(){
         //function that you cannot access
         funcC(){ /*.....*/}
         funcD(){/*.......*/}
         //what to render
         return (
           <div> 
               {/* your contents here */} 
           </div>
         )
    }
    //return accessible contents and functions in a JSON
    return {
        content: Content, //function for rendering content
        ExposeA: funcA,   //return as a closure
        ExposeB: funcB,   //return as a closure
    }
}

下面是一个如何在父级中呈现子级内容的示例

function Parent(){
    let chi = Child();
    let ChildContent = chi.Content;
    //calling your exposed functions
    //these function can interacts with the states that affects child components
    chi.ExposeA();  
    chi.ExposeB();
    //render your child component
    return (<div>
        <div> {/* parent stuff here */</div>
        <div> {/* parent stuff here */</div>
        <ChildContent {/*Define your props here */} />
    </div>)
}

在父母的反应中调用子组件方法

3 个答案:

添加到@ shubham-khatri解决方案：