为什么我的文本在 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;

我的代码来自用户输出.js

import React from 'react';

const userOutput = (props) => {

  return (

    <div>

      <p>Username: {props.name}</p>

      <p>Hello {props.name}</p>

    </div>

  );

};

export default userOutput;

我的代码来自用户输入.js

import React from 'react';

const userInput = (props) => {

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

};

export default userInput;

Answer 1

你的组件正在使用一个在 React 中不是有效事件的事件，请尝试使用。UserInputonChangedonChangeimport React from 'react';const userInput = (props) => {&nbsp; return <input type="text" onChange={props.changed} />;};export default userInput;

Answer 2

您正在使用组件中输入字段上的事件操作的名称。将其替换为onChangeduserInputreturn&nbsp;<input&nbsp;type="text"&nbsp;onChange={props.changed}&nbsp;/>;