如何在反应中添加输入文本事件处理程序

Question

我在 udemy 注册了一个反应课程，有一个作业。那里给出了解决方案，但似乎反应库文件已更新，因此代码需要更改状态和事件处理程序。我在这里发布代码和我找到的答案，以防万一有人需要答案。

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

import UserInput from './UserInput/UserInput';
import UserOutput from './UserOutput/UserOutput';

class App extends Component {
  state = {
    username: 'jkr'
  }

  usernameChangedHandler = (event) => {
    this.setState({username: event.target.value});
  }

  render() {
    return (
      <div className="App">
        <ol>
          <li>Create TWO new components: UserInput and UserOutput</li>
          <li>UserInput should hold an input element, UserOutput two paragraphs</li>
          <li>Output multiple UserOutput components in the App component (any paragraph texts of your choice)</li>
          <li>Pass a username (of your choice) to UserOutput via props and display it there</li>
          <li>Add state to the App component (=> the username) and pass the username to the UserOutput component</li>
          <li>Add a method to manipulate the state (=> an event-handler method)</li>
          <li>Pass the event-handler method reference to the UserInput component and bind it to the input-change event</li>
          <li>Ensure that the new input entered by the user overwrites the old username passed to UserOutput</li>
          <li>Add two-way-binding to your input (in UserInput) to also display the starting username</li>
          <li>Add styling of your choice to your components/ elements in the components - both with inline styles and stylesheets</li>
        </ol>
        <UserInput 
          changed={this.usernameChangedHandler} 
          currentName={this.state.username} />
        <UserOutput userName={this.state.username} />
        <UserOutput userName={this.state.username} />
        <UserOutput userName="Max" />
      </div>
    );
  }
}

export default App;

Answer 1

这里state和event handler的代码需要修改如下

    class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: 'jkr'
    };
   this.usernameChangedHandler=this.usernameChangedHandler.bind(this);
    
  }



usernameChangedHandler(event)  {
    this.setState( { username: event.target.value});
  }

这样就可以了

礼貌：https://reactjs.org/docs/forms.html https://reactjs.org/docs/hooks-state.html

Answer 2

有了功能组件，您应该能够处理挂钩来管理状态。这就是代码的样子。

import {useState} from "react";

    const App = () => {
const [userName, setUserName]=useState("");

userNameChangeEventHandler = (e) => {
setUserName(e.target.value);
}

}

如何在反应中添加输入文本事件处理程序

How to add input text event handler in react

reactjs

state

eventhandler