Передавать callback в компоненты можно разными способами и не каждый может быть верным. Я исходил из «best practices» от Airbnb и из своего опыта и делюсь тем, как правильно пробрасывать методы в ваши компоненты.
_10// ✅ GOOD_10<Button onClick={removeItem.bind(this, id)}>Удалить</Button>_10_10// ❌ BAD_10<Button_10 onClick={() => {_10 removeItem(id);_10 }}>_10 Удалить_10</Button>
Старайтесь не создавать анонимную функции, для передачи данных в другую функцию в «функциональном компоненте (stateless component)». Для подобной ситуации, используйте метод — .bind().
Метод bind() создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения this предоставленное значение. В метод также передаётся набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при её вызове.
В onClick передавайте функцию removeItem с привязкой контекст и новых аргументов.
Подробнее о .bind(): https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
_10// ✅ GOOD_10<Input onChange={this.props.onChange} />_10_10// ✅ GOOD_10<Input onChange={this.props.onChange.bind(this, 'myField')} />_10_10// ❌ BAD_10<Input onChange={value => this.props.onChange(value)} />
В данном случае, метод onChange автоматически передаст value первым аргументом в функцию this.props.onChange.
Если же вы хотите добавить дополнительные аргументы, после value, пробрасывайте их через .bind(this, ...). В итоге, onChange получит 2 значания — введённое значение пользователем и строку myField.
_26// ✅ GOOD_26class App extends React.Component {_26 constructor() {_26 super();_26 this.myMethod = this.myMethod.bind(this);_26 }_26 myMethod() {_26 ..._26 }_26 render() {_26 return <Button onClick={this.myMethod}></Button>;_26 }_26}_26_26// ❌ BAD_26class App extends React.Component {_26 constructor() {_26 super();_26 }_26 myMethod() {_26 ..._26 }_26 render() {_26 return <Button onClick={this.myMethod.bind(this)}></Button>;_26 }_26}
Верным решением для компонента-класса, будет переопределять контекст this внутри конструктора.