在反应中将事件和道具从孩子传递给父母

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

但是在孩子中绑定 this 会导致它不再起作用。 传递给此函数的其他道具不会返回给父级。 有什么方法可以写这个，以便我可以取回“测试密钥”？

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

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

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

通过这种方式，您也可以传递event对象。

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

Answer 3

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

<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>
 );
};