События (клик, ввода текста)

Способ 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 });
    }
}

Пример кода на Playcode

В событии можно сразу указать метод 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 });
    }
}

Пример кода на Playcode

Способ 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 });
    }
}

Пример кода на Playcode

Т.к. в этом способе компоненты могут быть заново рендериться, то в плане производительности, рекомендуется использовать первый способ.