在子组件中单击后，如何在父组件中执行 alert()

Question

在这里，我正在将数据从子级传递到父级，并且我能够通过它，但我希望警报函数仅在子组件中触发onClick事件后执行，但它每次触发onSubmit事件时都会执行，看起来需要一些生命周期方法才能使其工作，但我没有得到它。有人可以帮我解决这个问题吗

父母

onList(list) {
  alert(list);
 }
  render() {
    return (
      <div>
       <form>
        <input type='textarea'
               onKeyPress={this.handleSubmit}   
        />
        <Child {...this.state} sendList={this.onList}/>
       </form>
      </div>
    )
  }

孩子

    {
      this.props.listArr.map((list,index) => {
         return(
           <div key={index}>
            <li>{list}
              <div>
               <button className="btn btn-primary btn-xs glyphicon glyphicon-pencil" onClick={this.props.sendList(list)} />
              </div>
            </li>
           </div>
         )})
     }

Answer 1

更改为： <Child {...this.state} sendList={(...args) => this.onList(...args)} /> ，以保留函数上下文。

然后，在Child只需将该方法称为this.props.sendList()

Answer 2

您可以在单击按钮时使用event.preventDefault()，这样表单就不会提交。

const Child = ({ sendList, list }) => 
  <div>
    <button onClick={(event) => sendList(event, list)}>Click</button>
  </div>
class Parent extends React.Component {
  constructor() {
    super()
    this.onList = this.onList.bind(this)
  }
  onList(event, list) {
    event.preventDefault()
    console.log('onList', list)
  }
  render() {
    return (
      <form>    
        <Child sendList={this.onList} list={[]} />
      </form>
    )
  }
}
ReactDOM.render(
  <Parent />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>