функция react onChange не работает для тега select

#javascript #reactjs

Вопрос:

У меня была эта проблема некоторое время, поэтому я надеюсь найти ответ здесь. Я попытался реализовать простой тег select на основе кода, приведенного в документах react. Однако у меня это не работает. Вот код, который я написал:

 <select value={this.state.formId} onChange={this.handleInternalFormChange}>
                        {
                            Object.keys(this.state.userForms).map(formKey => ( 
                                <option key={formKey} value={formKey} > {this.state.userForms[formKey]} </option>
                            ))
                        }

и вот функция, которая вызывает onChange,

  handleInternalFormChange = (e) =>{
        this.setState({
            formId: e.target.value
        })
        console.log(this.state.formId);

    }

После внесения этих изменений функция onChange, похоже, не работает. я попытался распечатать вызываемое событие, но, похоже, оно не содержит target . Не уверен, что больше делать, кто-нибудь может помочь с этим?

1. Если ваша проблема в console.log, вы не можете получить измененное e.target.value. Потому что функция setState является асинхронной. Вы должны использовать функцию обратного вызова.

2. Вы утешили e.target.value ? В том, как вы это делаете, нет ничего плохого. Вы можете подтвердить это самостоятельно, проверив onChange={e=>console.log(e)}

Ответ №1:

В том, как вы сейчас это делаете, нет ничего плохого. Причина, по которой вы console.log() не выводите состояние, заключается в том, что setState() оно асинхронное ( console.log() кстати, тоже асинхронное). Если вы хотите увидеть, каково обновленное состояние, используйте setState() второй параметр, который предоставляет вам новое значение.

Вы можете подтвердить, что событие используется в onChnage() , заменив вызов вашей функции на:

 <select onChange={e=>console.log(e.target.value)}>

Если вы хотите проверить значение после обновления вашего состояния, выполните:

 this.setState({value}, updatedState=>console.log(updatedState));

Надеюсь, это поможет прояснить ситуацию,

1. Да, это имеет смысл. Я понял, что сразу после того, как я вызвал set state в handleInternalFormChange , я вызывал setState в функции сразу после в другой функции. Вероятно, это было проблемой

Ответ №2:

Если вы хотите получить console.log результат, проверьте это

  handleInternalFormChange = (e) =>{
        this.setState({
            formId: e.target.value
        }, () => {
           console.log(this.state.formId);
        })

    }