Question

我正在学习React，下面是我正在尝试的示例代码。我能够呈现此组件并能够在没有任何handleChange（）方法的情况下在输入字段中键入字符？这样好吗因为我知道的是，为了使输入字段可用于输入，我们需要添加handleChange方法，如下所示：

handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
}

import React from "react";

class StudentForm extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <form>
          <h1>Student Form</h1>
          <input type="text" name="firstname"></input>
        </form>
      </div>
    );
  }
}

export default StudentForm;

Answer 1

handleChange用于设置状态值。

您无需键入onChange处理程序，但您的值不会存储在任何地方。

例如，如果您尝试访问状态this.state.firstname，则将始终获得undefined。

您应该有controlled component。这是一种简单而干净的状态访问和存储状态的方法。

要控制组件，您应该在输入上使用value和onChange道具，

<input type="text" name="firstname" value={this.state.firstname} onChange={this.handleChange.bind(this)}></input>

Answer 2

是的，请考虑以下内容

<input type="text" name="firstname" />

这是uncrontrolled input，这意味着React现在不再value，也不知道如何更改它。要使input受控制，您需要明确指定value和onChange属性，以将该输入绑定到React的state

const Input = () =>{
    const [value, setValue] = useState('')

    return <input value={value} onChange={e => setValue(e.target.value)} />
}

现在input由React完全控制，它提供了必须打印的value以及更改它的方法

Answer 3

进行以下更改之后，我将此输入元素设置为受控元素，现在如果不使用onChange处理程序，我将无法键入任何内容。

import React from "react";

class StudentForm extends React.Component {
  constructor() {
    super();
    this.state = {
      firstname: ""
    };
  }

  render() {
    return (
      <div>
        <form>
          <h1>Student Form</h1>
          <input
            type="text"
            name="firstname"
            value={this.state.firstname}
          ></input>
        </form>
      </div>
    );
  }
}

export default StudentForm;

无需onChange方法即可在输入文本字段内键入

3 个答案: