Javascript Can'；t获取react中输入的实际值

我正在开发一个react组件，以获取输入中的值，并使用refs在标记中自动显示它

所有操作都正常，但显示的值是以前的值

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

类Conversor扩展组件{
建造师（道具）{
超级（道具）
此.state={
值：null
}
this.output=this.output.bind（this）
}
输出（）{
console.log（this.state）
this.refs.output.innerHTML=this.state.value
}
render（）{
返回(
{this.state.inputValue}
{this.setState（{value:this.refs.input.value}）；this.output（）}/>
);
}
}

---

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

实现目标的最佳方法是不使用参考文献。这是你怎么做的

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

        this.state = {};
    }

    handleChange = (e) => {
      const { id, value } = e.target;
      this.setState({
        [id]: value
      })
    }

    render() {
      const { name, anotherName } = this.state;
        return (
            <div>
                <h2>{name}</h2>
                <input id="name"  name="name" type="text" onChange={this.handleChange}/>

                <h2>{anotherName}</h2>
                <input id="anotherName"  name="anotherName" type="text" onChange={this.handleChange}/>
            </div>
        );
    }
}

---

您根本不需要绑定输入处理程序函数。与其这样做，不如使用像_handleInputExtChange这样的箭头函数。看看这个：

import React, { Component } from 'react';
class InputTextHandler extends Component {
   constructor(props){
       super(props)
       this.state = {
           inputValue: ''
       }
   }

   _handleInputTextChange = e => {
       const inputValue = e.target.value;
       this.setState({inputValue})
       console.log(inputValue)
   }

   render() {
       return (
           <div>
               <input
                    type="text"
                    onChange={this._handleInputTextChange}/>
           </div>
       );
   }
}

export default InputTextHandler;

import React，{Component}来自'React'；
类inputExtHandler扩展组件{
建造师（道具）{
超级（道具）
此.state={
输入值：“”
}
}
_HandleInputExtChange=e=>{
常量输入值=e.target.value；
this.setState（{inputValue}）
console.log（inputValue）
}
render（）{
返回(
);
}
}
导出默认的InputTextHandler；

两件事：在onChange方法中获取事件值，并将

this.output

方法作为第二个参数传递给

设置状态

，该设置状态在更新状态后触发，这不是同步操作

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

render（）{
返回(
{this.state.inputValue}
{this.setState（{value:event.target.value}，this.output）}/>
);
}

---

您可以使用事件来执行此操作，而无需使用

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>
        );
    }
}

类Conversor扩展组件{
建造师（道具）{
超级（道具）
此.state={
值：null
}
}
render（）{
返回(
{this.state.inputValue}
{this.setState（{value:e.target.value}）；}}/>
{this.state.value}
);
}
}

谢谢，伙计，很好用。但是你知道为什么我在onChange atribute中放置其他函数时会产生不同的结果吗？在你的例子中，问题是setState（）是一个异步函数，当你调用output（）函数时，状态可能不会被更新。为此，您可以将output（）函数作为回调函数传递给setState函数<代码>设置状态（{value:e.target.value}，（）=>{this.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>
        );
    }
}