Question

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

在上面的示例中，

，如果使用键盘输入更改了文本值，它将触发onChange事件，但是如果通过this.props.transcript动态更改了文本值，则不会触发onChange事件。如何解决这个问题？

Answer 1

如果我们正确使用react setState，它应该可以正常工作，但是，看起来您有两组值，一组来自父级“ this.props.transcript”，另一组在输入框中，由“ this.handleChange”处理。或者，检查是否需要反应钩子，例如“ componentWillUpdate”和“ componentWillReceiveProps”，以将状态更改应用于输入。

Answer 2

在没有看到更多代码的情况下，看来您输入的笔录值错误。

尝试值= {props.transcript}，如果该值不起作用，则值= {this.state.transcript}。

Answer 3

您可以使用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;

以编程方式更改值时如何在文本输入上触发onChange事件-反应

3 个答案: