将事件和道具从孩子传递给父母以做出反应

Question

我已经开始将一些代码拆分为多个presentational/container组件，并且我想在child/presentational组件中调用一个函数，然后将事件和某种道具传递回父级。

上级：

class Parent extends Component{
    constructor(props) {
        super(props);
        this.state = {}
        this.reroll = this.reroll.bind(this);
    }

    test(key, e){
        console.log(key, e)
    }
    render() {
        return <Child test={()=>this.test} />
    }
}

儿童：

var Child = () => {
    return ( 
        <select onChange={props.test('test-key')}>
            <option value='1'> Option 1 </option>
            //etc...
        </select>
    )
}

通常，当我将代码全部放在一个地方时，我会像这样编写onChange函数。

<select onChange={props.test.bind(this, 'test-key')}>

但是将其绑定在子代中将使其不再起作用。传递给此函数的其他道具都不会返回给父对象。有什么办法可以写成这样，以便我可以取回“测试键”？

Answer 1

第一：您应该尽可能避免在渲染中绑定函数，因为它会导致每次调用渲染时都会创建一个新函数。在你的情况下，你可以很容易地避免它，比如

使用箭头函数定义测试函数

test(key, e){
    console.log(key, e)
}

然后在父类中使用它

<Child test={this.test} />

现在在子组件中

test = (e) => {
   this.props.test('test-key', e)
}

<select onChange={this.test}>

Answer 2

任何来这里的人都试图为功能组件找到同样的东西。我这里有一个例子。父组件示例：

<SaveButton
 newsArticleId="someId"
 onClickCallback={handleSaveNote}
    />

const handleSaveNote = (e, articleId) => {    
const event = e || window.event;
  event.preventDefault();     
  setArticleId(articleId);
  ....code removed
 };

子组件示例：

 const SaveButton = ({ newsArticleId, onClickCallback }) => {
 return (
  <button
   id={newsArticleId}
   className='btn btn-sm btn-primary'
   type='button'
   data-toggle='dropdown'
   aria-haspopup='true'
   aria-expanded='false'
   onClick={(e) => onClickCallback(e, newsArticleId)}
  >
   Save
  </button>
 );
};

Answer 3

您需要将函数调用放入onChange事件的回调中。

 <select onChange={()=>props.test('test-key')}>

这样，您也可以传递event对象。

 <select onChange={(event)=>props.test(event,'test-key')}>