как вызвать событие onChange при вводе текста, когда значение изменяется программно - реагировать

Question

render() {
    return (
        <input
            onChange={this.handleChange}
            value={this.props.transcript}
            type='text
        />
    )    
}

в приведенном выше примере. Если текстовое значение изменяется с помощью ввода с клавиатуры, оно вызывает событие onChange, но если оно динамически изменяется с помощью this.props.transcript, событие onChange не вызывается.Как решить эту проблему?

Answer 1

Не видя больше кода, похоже, что ваше значение для стенограммы во входных данных неверно.

Попробуйте значение = {props.transcript}, а если это не сработает, то значение = {this.state.transcript}.

Answer 2

Вы можете использовать хуки componentWillReceiveProps для достижения этого, так как ваш реквизит обновляется, он будет вызывать метод componentWillReceiveProps.Внутри метода это ваша игровая площадка.Пожалуйста, убедитесь, что этот метод будет вызываться при каждом изменении реквизита

import React,{ Component } from 'react'

class InputBox extends Component {
    componentWillReceiveProps(nextProps){
        // write your logic here or call to the common method
        console.log(nextProps.transcript);
    }
    handleChange(e){
        console.log(e.target.value)
    }
    render(){
        return(
            <section>
                <input
                    onChange={this.handleChange}
                    value={this.props.transcript}
                    type='text'
                />
            </section>
        );
    }
}

export default InputBox;

Answer 3

Если мы правильно реагируем на setState, он должен работать без проблем, но, похоже, у вас есть два набора значений: один из родительского «this.props.transcript» и один в поле ввода, которое обрабатывается «this.handleChange»,Кроме того, проверьте необходимость использования реагирующих хуков, таких как "componentWillUpdate" и "componentWillReceiveProps", чтобы применить изменение состояния на входе.