使用 setState() 反应输入元素的 onChange 不起作用答案

【问题标题】：React input element's onChange using setState() doesn't work使用 setState() 反应输入元素的 onChange 不起作用
【发布时间】：2019-11-14 01:52:50
【问题描述】：

我想制作一个应用程序，以便在输入元素中输入文本时，这将反映输出的变化。到目前为止更新不起作用:(

import React, { Component } from 'react';
import './App.css';
import UserInput from './UserInput/UserInput';
import UserOutput from './UserOutput/UserOutput';

class App extends Component {
  state = {
    user: [
      { username: 'Kai' },
      { username: 'Orange' }
    ]
  }

  inputChangeHandler = (e) => {
    this.setState(
      {
        user: [
          { username: e.target.value },
          { username: e.target.value }
        ]
      }
    )
  }

  render() {
    return (
      <div className="App">
        <UserInput onChange={this.inputChangeHandler} />
        <UserOutput username={this.state.user[0].username} />
        <UserOutput username={this.state.user[1].username} />
      </div>
    );
  }
}

export default App;

在输入元素中键入的文本的更改应反映为在 UserOutput 中呈现的用户名。这不起作用。

这里是其他组件的代码...

import React, { Component } from 'react';

class UserInput extends Component
{
    render() {
        return(
            <div>
                <input />
            </div>
        );
    }
}

export default UserInput;

和

import React, { Component } from 'react';

class UserOutput extends Component
{
    render() {
        return(
            <div>
                <p>First paragraph and my name is {this.props.username}</p>
                <p>Second paragraph </p>
            </div>
        );
    }
}

export default UserOutput;

【问题讨论】：

如果你在渲染中记录this.state.user，你能看到用户数组在你输入的时候被更新了吗？另外，您如何呈现UserOutput 中的用户名？
inside UserOutput:

第一段，我的名字是{this.props.username}

第二段
您提供的代码中没有任何内容会导致错误。为您的 UserInput 和 UserOutput 组件添加代码

标签： reactjs events onchange

【解决方案1】：

好的，这就是你的问题。您没有将更改处理程序分配给 UserInput 组件中的输入元素。应该是：

<input onChange={this.props.onChange} />

【讨论】：