javascript - 无法获得 react 中输入的实际值

Question

我正在开发一个 React 组件以获取输入中的值并使用 refs 自动将其显示在标签中。

一切正常，但显示的值是以前的值。

我现在真的不知道如何解决这个问题。我在输入中使用 onChange 事件来更改将要显示的状态，很明显没有采用当前值，而是采用先前值

class Conversor extends Component {
    constructor(props){
        super(props)

        this.state = {
            value: null
        }

        this.output = this.output.bind(this)
    }

    output(){

        console.log(this.state)

        this.refs.output.innerHTML = this.state.value
    }

    render() {
        return (
            <div>
                <h2>{this.state.inputValue}</h2>
                <input ref="input" type="text" onChange={() => {this.setState({ value: this.refs.input.value }); this.output()}}/>
                <label ref="output"></label>
            </div>
        );
    }
}

如果我在输入中输入值“Hello World”，则显示的值是“Hello Worl”，而它必须是“Hello World”

Answer 1

您可以使用事件来执行此操作，而不需要 output() 函数。

class Conversor extends Component {
    constructor(props){
        super(props)

        this.state = {
            value: null
        }
    }

    render() {
        return (
            <div>
                <h2>{this.state.inputValue}</h2>
                <input ref="input" type="text" onChange={(e) => {this.setState({ value: e.target.value });}}/>
                <label ref="output">{this.state.value}</label>
            </div>
        );
    }
}