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

Question

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

共有三个组件:

1. 应用程序
2. 获取输入
3. 索引

问题是当用户在输入字段中输入文本时 setState() 函数无法正常工作且数据未更新。出于测试目的，当我将 console.log 放置在应用程序 js 组件中时，它在控制台上显示未定义。请有人对此进行排序。我想在状态更新时控制台更新的数据

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;