События (клик, ввода текста)
Способ 1. Через привязку (bind)
В качестве примера можно создать текстовое поле, и добавить атрибут onChange
, который будет обновлять переменную при каждом изменении значения.
<input type="text" onChange={this.changeName} defaultValue={this.state.name} />
При изменении переменной (состояния), она также автоматически обновится на самой странице.
И создать метод changeName()
.
class Items extends React.Component { constructor(props) { super(props); this.state = {name: "React"}; this.changeName = this.changeName.bind(this); } changeName(e) { this.setState({ name: e.target.value }); } }
В событии можно сразу указать метод bind()
, но тогда во всех методах changeName()
надо будет прописывать bind(this)
.
<input type="text" onChange={this.changeName.bind(this)} defaultValue={this.state.name} />
Пример передачи аргументов через bind()
.
class Items extends React.Component { constructor(props) { super(props); this.state = {name: "React"}; this.changeName = this.changeName.bind(this, "Второй аргумент"); } // Аргумент "e" указывается в конце changeName(prepend, e) { this.setState({ name: prepend + ": " + e.target.value }); } }
Способ 2. Через функцию
В атрибут onChange
можно также передавать функцию.
<input type="text" onChange={(e) => this.changeName(e)} defaultValue={this.state.name} />
Код компонента аналогичен первому примеру, единственное различие, нет привязки через bind()
.
class Items extends React.Component { constructor(props) { super(props); this.state = {name: "React"}; } changeName(e) { this.setState({ name: e.target.value }); } }
Т.к. в этом способе компоненты могут быть заново рендериться, то в плане производительности, рекомендуется использовать первый способ.
Авторизуйтесь, чтобы добавлять комментарии