Question

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

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

我现在真的不知道如何解决此问题。我在输入中使用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 World”时，显示的值为“ Hello Worl”

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

Answer 2

实现目标的最好方法是不使用裁判。这是您的操作方式

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

如果您仍然想使用refs，请执行以下操作，

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

        this.state = {
            value: null
        }
    }

    output = (e) =>{
        this.setState({value: e.target.value }, () => {
        this.refs.output.innerHTML = this.state.value
        })
    }

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

Answer 3

您根本不需要绑定输入处理程序函数。不用这样做，只需使用 _handleInputTextChange 之类的箭头函数。检查一下：

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;

Answer 4

两件事：在onChange方法中获取事件值，并将this.output方法作为第二个参数传递给setState，后者在状态更新后触发，这不是同步操作。 / p>

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

Try it here!

无法在react中获取输入的实际值

4 个答案: