为什么我的文本在 React 中将文本写入输入标记时没有更改

Question

我的代码从应用程序.js。这个想法是，当您在输入中输入文本时，屏幕应相应地更新。由于某种原因，设置状态不起作用，我不知道为什么。import React, { Component } from 'react';import UserOutput from './Components/UserOutput';import UserInput from './Components/UserInput';class App extends Component {  state = {    username: 'Adib',  };  changeUsername = (event) => {    this.setState({      username: event.target.value,    });  };  render() {    return (      <div className="App">        <UserInput changed={this.changeUsername} />        <UserOutput name={this.state.username} />      </div>    );  }}export default App;我的代码来自用户输出.jsimport React from 'react';const userOutput = (props) => {  return (    <div>      <p>Username: {props.name}</p>      <p>Hello {props.name}</p>    </div>  );};export default userOutput;我的代码来自用户输入.jsimport React from 'react';const userInput = (props) => {  return <input type="text" onChanged={props.changed} />;};export default userInput;

Answer 1

你的组件正在使用一个在 React 中不是有效事件的事件，请尝试使用。UserInputonChangedonChange

import React from 'react';

const userInput = (props) => {

  return <input type="text" onChange={props.changed} />;

};

export default userInput;

Answer 2

您正在使用组件中输入字段上的事件操作的名称。将其替换为onChangeduserInput

return <input type="text" onChange={props.changed} />;