закрытие нескольких кнопок не работает в reactjs

Question

У меня есть средство выбора даты, и даты отображаются в текстовом поле с помощью кнопки закрытия (x). При выборе даты из средства выбора даты добавится дата, как показано,

Но кнопка закрытия не работает, при нажатии кнопки закрытия следует удалить указанное поле даты c. ссылка https://codesandbox.io/s/strange-http-zhj4f?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Немного измените свой код.

<DatePicker
     locale="en-GB"
     onChange={this.buttonHanlder}
     value={this.state.closedate}
/>

И в вашем buttonHandler методе используйте следующий код

buttonHanlder = value => {
    if (value) {
        var dateformat = [
            ("0" + value.getDate()).slice(-2) +
            "-" +
            ("0" + (value.getMonth() + 1)).slice(-2) +
            "-" +
            value.getFullYear()
        ];
        this.setState(prevState => ({
            closedate: value,
            closedatearr: [...prevState.closedatearr, ...dateformat]
        }));
    } else {
        this.setState({
            closedate: ''
        });
    }
};

Причина для этого: Когда Вы нажимаете на X (кнопка закрытия), чтобы вызвать реагирование на выбор даты buttonHandler с нулевым значением, которое означает, что пользователь очистил дату. Поэтому вам нужно обрабатывать нулевое значение в соответствии с вашими требованиями.