父

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()，这样表单就不会被提交。

＆＃13;

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')
)

＆＃13;

<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>

＆＃13;

如何在子组件中的onClick后执行父组件中的alert（）

父

子

2 个答案: