onchange输入和设置状态不起作用？

Question

我正在使用react-js处理简单的表单元素。

有三个组成部分：

1. 应用
2. TakeInput
3. 指数

问题是当用户将文本放入输入字段时，setState（）函数无法正常工作且数据未更新。出于测试目的，当我在app js组件中放置console.log时，它在控制台上显示未定义。任何人都请这样。我想在状态更新时控制更新的数据

App.js

import React, { Component } from 'react';
import InputField from './TakeInput';

class App extends Component {
  state = {
    userInp : '',
    outText : ''
  }
  handlechanger2 = (v) => {
    this.setState( () => ({
      userInp: v,
    }))

    console.log(this.userInp);
  }


  render() {
    return (
      <div className="App">
        <InputField changingVal={this.handlechanger2}/>
      </div>
    );
  }
}

export default App;

TakeInput.JS

import React, { Component } from 'react';

class TakeInput extends Component{
    state={
        txt: ''
    }

    handlerChange = (e)=>{
        const { changingVal } = this.props;
        const v = document.getElementById("userInput").value;
        changingVal(v);
        // console.log(e.target.value);
        this.setState({ txt: e.target.value })

    }

    render(){
        return(
            <input type="text" name="userInput" id="userInput" placeholder="Please Enter Text" onChange={this.handlerChange} value={this.txt}/>
        )
    }

}

export default TakeInput;

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

Answer 1

这是关于你正在发展错误的方式。我认为你的文本输入应该在你的父组件

• 要从状态读取，您应该使用this.state.abc

---

import React, { Component } from 'react';

class TakeInput extends Component{

    handlerChange = (e)=>{
        this.props.onChange(e.target.value);

    }

    render(){
        return(
            <input type="text" name="userInput" placeholder="Please Enter Text" onChange={this.handlerChange} value={this.props.txt}/>
        )
    }

}

export default TakeInput;

---

import React, { Component } from 'react';
import InputField from './TakeInput';

class App extends Component {
  state = {
    userInp : '',
    outText : ''
  }
  handlechanger2 = (v) => {
    this.setState( () => ({
      userInp: v,
    }))

    console.log(this.state.userInp);
  }


  render() {
    return (
      <div className="App">
        <InputField txt={this.state.userInp} onChange={this.handlechanger2}/>
      </div>
    );
  }
}

export default App;

Answer 2

你正在尝试console.log this.userInp。它应该是this.state.userInp。

另外，要在最后设置状态之后立即查看更新，您可以执行以下操作：

handlechanger2 = (v) => {
    this.setState( () => ({
      userInp: v,
    }), function(){ console.log(this.state.userInp);}) // set a callback on the setState
  }