reactjs - 新版本中的反应状态使用

Question

我是新来的反应，

目前我们正在使用新版本的反应，

新版本的反应状态（当前版本）：

   class MyForm extends React.Component {
  const [state, setState] = useState([]);
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    setState({[nam]: val});
  }
  render() {
    return (
      <form>
      <h1>Hello {state.username} {state.age}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={myChangeHandler}
      />
      <p>Enter your age:</p>
      <input
        type='text'
        name='age'
        onChange={myChangeHandler}
      />
      </form>
    );
  }
}

我如何在旧的 React 中定义它。

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
    };
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username} {this.state.age}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={this.myChangeHandler}
      />
      <p>Enter your age:</p>
      <input
        type='text'
        name='age'
        onChange={myChangeHandler}
      />
      </form>
    );
  }
}

我使用它类似于旧的，但是当名称状态更新时，状态中的年龄值被清除，反之亦然

标签： reactjs

Answer 1

function MyForm() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  return (
    <form>
      <h1>Hello {state.username} {state.age}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={(event) => setName(event.target.value)}
      />
      <p>Enter your age:</p>
      <input
        type='text'
        name='age'
        onChange={(event) => setAge(event.target.value)}
      />
    </form>
  );
}