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

但是在孩子身上绑定它会导致它不再起作用。传递给此函数的其他任何道具都不会返回给父级。我有什么方法可以写这个，以便我可以回来测试关键＆＃39;？

Answer 1

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

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

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

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

Answer 2

首先：你应该避免在渲染中尽可能多地绑定函数，因为它会在每次调用渲染时导致创建一个新函数。在您的情况下，您可以轻松避免使用

使用箭头功能

定义测试功能

9 > 5

然后在父母中使用它

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

现在在子组件

中

<Child test={this.test} />

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

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

3 个答案: