Почему моя привязка не работает в конструкторе
Я делаю очень простое состояние с двумя кнопками. где, если я нажимаю кнопку, отображается компонент A, а при нажатии кнопки bbutton - компонент B. Я сопоставляю массив элементов, чтобы каждый из них имел свое собственное состояние кнопок. Допустим, если я нажму кнопку B элемента 1, я хочу, чтобы отображался только первый элемент B. Прямо сейчас Все они срабатывают сразу. Я ограничил каждый из них в конструкторе, но все же я не могу получить только один раз, когда щелкнул, чтобы запустить и показать соответствующий компонент.
class Home extends Component {
constructor(props) {
super(props);
this.state = {
lists: []
showA: true,
showB: false
}
this.aButtonHandler = this.aButtonHandler.bind(this);
this.bButtonHandler = this.bButtonHandler.bind(this);
}
aButtonHandler = (e) => {
this.setState({
showA: true,
showB: false
})
}
bButtonHandler = (e) => {
this.setState({
showA: false,
showB: true
})
}
render(){
return (
<div>
{this.state.lists.map(detail =>
<li>{detail.id}</li>
<button onClick = {(e) => this.aButtonHandler(e)} >see A</button>
<button onClick = {(e) => this.bButtonHandler(e)} >see B</button>
{this.state.showA ?
<ComponentA /> : null
}
{this.state.showB ?
<ComponentB /> : null
}
)}
</div>
)
}
Ответы 2
Если вы используете стрелочные функции, связывать функции не нужно.
Если вы хотите привязать, измените его на нормальную функцию, как это.
aButtonHandler(e){...}
bButtonHandler(e){...}
Я перешел на нормальную работу. Но это все то же самое.
Если вы хотите использовать привязку в конструкторе, не нужно использовать функцию стрелки, просто используйте обычные функции и передайте функцию непосредственно onClick
aButtonHandler(e) { this.setState({ showA: true, showB: false }); }
bButtonHandler(e) { this.setState({ showA: false, showB: true }); }
render() {
return (
<div>
{this.state.lists.map(detail => (
<div>
<li>{detail.id}</li>
<button onClick = {this.aButtonHandler}>see A</button>
<button onClick = {this.bButtonHandler}>see B</button>
{this.state.showA ? <ComponentA /> : null}
{this.state.showA ? <ComponentB /> : null}
</div>
))}
</div>
);
В ветке @BhojendraRauniyar есть вся подробная информация ... определенно хорошее чтение, чтобы решить его самостоятельно. stackoverflow.com/questions/52788613/…
Прочтите внимательно, вы сможете решить: stackoverflow.com/questions/52788613/…