Javascript 为什么我的文本在我'；我正在将文本写入React中的输入标记

我的代码来自App.js。其思想是，当您在input中输入文本时，屏幕应该相应地更新。由于某种原因，设置状态不起作用，我不知道为什么

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;

import React，{Component}来自'React'；
从“./Components/UserOutput”导入UserOutput；
从“./Components/UserInput”导入UserInput；
类应用程序扩展组件{
状态={
用户名：“Adib”，
};
changeUsername=（事件）=>{
这是我的国家({
用户名：event.target.value，
});
};
render（）{
返回(
);
}
}
导出默认应用程序；

来自useroutput.js的我的代码

import React from 'react';

const userOutput = (props) => {
  return (
    <div>
      <p>Username: {props.name}</p>
      <p>Hello {props.name}</p>
    </div>
  );
};

export default userOutput;

从“React”导入React；
const userOutput=（道具）=>{
返回(
用户名：{props.name}

你好{props.name}

);
};
导出默认用户输出；

来自userinput.js的我的代码

import React from 'react';

const userInput = (props) => {
  return <input type="text" onChanged={props.changed} />;
};

export default userInput;

从“React”导入React；
常量用户输入=（道具）=>{
返回；
};
导出默认用户输入；

您正在使用

onChanged

作为

userInput

组件中输入字段上事件操作的名称。换成

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

返回；

您的

UserInput

组件正在使用

onChanged

事件，该事件在React中不是有效的事件，请尝试改用

onChange

import React from 'react';

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

export default userInput;

从“React”导入React；
常量用户输入=（道具）=>{
返回；
};
导出默认用户输入；

加载页面时能否显示呈现的HTML？

onChange

需要

onChange