Reactjs 如何从用户处获取输入并使用setState进行更改？ 建造师{ 超级的 此.state={ 姓名：， 名称1:， }; } 更改==>{ this.setState{name:this.state.name1}； }; handleChange=e=>{ this.setState{name1:e.target.value}； }; 渲染{ 回来 点击我！ 你好！{this.state.name} ; }

这就是我所做的，但在实际的网页上感觉它是胡说八道，即使它能工作。有没有更好的方法从用户那里获取输入？

您对输入的更改将是

onChange={event => this.handleChange(event)}

onChange{() => this.change()}

对于按钮，它将是

onChange={event => this.handleChange(event)}

onChange{() => this.change()}

---

为什么您需要在状态中使用名称1。只要名字就行了。如果有帮助，请参阅下面的代码

我不知道你为什么要在button中处理事件。你可以用一张带有OnSubmit的表格

import React from "react";
import "./style.css";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
    };
  }

  render() {
    return (
      <div>
        <input
          type="text"
          placeholder="Enter your name"
          onChange={(e) => this.setState({name: e.target.value})}
        />
        <button>Click Me!</button>
        <h4>Hello! {this.state.name}</h4>
      </div>
    );
  }
}

---

名称不需要两个状态，但需要一个变量存储名称，第二个变量让组件知道名称已更新。我们需要第二个变量，因为在单击按钮时，名称必须根据所提到的代码进行更新。当状态更新时，组件将重新呈现。下面的代码可能会有所帮助

class Content extends React.Component {
  constructor(){
    super()
    this.state = {
        name: "",
    }
    this.name=''
}

change = () => {
    this.setState({name: this.name})
}

handleChange = (e) => {
    this.name=e.target.value
}

render(){

    return(
        <div>
            <input type = "text" placeholder="Enter your name" onChange={this.handleChange}></input>
            <button onClick={this.change}>Click Me!</button>
            <h4>Hello! {this.state.name}</h4>
        </div>
    )
}}

---

以下是带有React挂钩的版本：

import React, { useState } from 'react';

export default function App() {
  const [name, setName] = useState('');

  const handleNameChange = (e) => {
    const nameInput = e.target.value;
    setName(nameInput);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Enter your name"
        onChange={(e) => handleNameChange(e)}
      ></input>
      <button>Click Me!</button>
      <h4>Hello! {name}</h4>
    </div>
  );
}

---

我不想在键入输入时更改它，但onSubmit确实有帮助。非常感谢。