Có bao nhiêu loại đầu vào trong html?

Question

Các phần tử biểu mẫu HTML hoạt động hơi khác so với các phần tử DOM khác trong React, bởi vì các phần tử biểu mẫu tự nhiên giữ một số trạng thái bên trong. Ví dụ: biểu mẫu này ở dạng HTML đơn giản chấp nhận một tên duy nhất

Nội dung chính Show

Thành phần được kiểm soát
Thẻ vùng văn bản
Thẻ chọn
Thẻ đầu vào tập tin
Xử lý nhiều đầu vào
Giá trị Null đầu vào được kiểm soát
Các lựa chọn thay thế cho các thành phần được kiểm soát
Giải pháp toàn diện
Đầu vào trong HTML là gì?
Có bao nhiêu loại đầu vào?
5 loại yếu tố đầu vào trong HTML là gì?
Đầu vào HTML có thể có 2 loại không?

<form>
  <label>
    Name:
    <input type="text" name="name" />
  label>
  <input type="submit" value="Submit" />
form>

Biểu mẫu này có hành vi biểu mẫu HTML mặc định là duyệt đến một trang mới khi người dùng gửi biểu mẫu. Nếu bạn muốn hành vi này trong React, nó sẽ hoạt động. Nhưng trong hầu hết các trường hợp, thật thuận tiện khi có một hàm JavaScript xử lý việc gửi biểu mẫu và có quyền truy cập vào dữ liệu mà người dùng đã nhập vào biểu mẫu. Cách tiêu chuẩn để đạt được điều này là sử dụng một kỹ thuật gọi là “các thành phần được kiểm soát”

Thành phần được kiểm soát

Trong HTML, các thành phần biểu mẫu như

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

2,

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

3 và

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

4 thường duy trì trạng thái của riêng chúng và cập nhật nó dựa trên đầu vào của người dùng. Trong React, trạng thái có thể thay đổi thường được giữ trong thuộc tính trạng thái của các thành phần và chỉ được cập nhật với

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

5

Chúng ta có thể kết hợp cả hai bằng cách làm cho trạng thái React trở thành “nguồn sự thật duy nhất”. Sau đó, thành phần React hiển thị một biểu mẫu cũng kiểm soát những gì xảy ra trong biểu mẫu đó khi người dùng nhập tiếp theo. Một phần tử biểu mẫu đầu vào có giá trị được điều khiển bởi React theo cách này được gọi là “thành phần được điều khiển”

Ví dụ: nếu chúng ta muốn tạo ví dụ trước để ghi tên khi nó được gửi, chúng ta có thể viết biểu mẫu dưới dạng thành phần được kiểm soát

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

Dùng thử trên CodePen

Vì thuộc tính

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

6 được đặt trên phần tử biểu mẫu của chúng tôi, nên giá trị được hiển thị sẽ luôn là

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

7, làm cho trạng thái React trở thành nguồn gốc của sự thật. Vì

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

8 chạy trên mỗi lần nhấn phím để cập nhật trạng thái React, nên giá trị được hiển thị sẽ cập nhật khi người dùng nhập

Với một thành phần được kiểm soát, giá trị của đầu vào luôn được điều khiển bởi trạng thái React. Mặc dù điều này có nghĩa là bạn phải nhập thêm một chút mã, nhưng giờ đây bạn cũng có thể chuyển giá trị cho các thành phần giao diện người dùng khác hoặc đặt lại giá trị đó từ các trình xử lý sự kiện khác

Thẻ vùng văn bản

Trong HTML, một phần tử

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

3 xác định văn bản của nó bởi các phần tử con của nó

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

0

Trong React, một

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

3 sử dụng thuộc tính

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

6 để thay thế. Bằng cách này, một biểu mẫu sử dụng

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

3 có thể được viết rất giống với một biểu mẫu sử dụng đầu vào một dòng

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

4

Lưu ý rằng

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

7 được khởi tạo trong hàm tạo, để vùng văn bản bắt đầu với một số văn bản trong đó

Thẻ chọn

Trong HTML,

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

4 tạo danh sách thả xuống. Ví dụ: HTML này tạo danh sách thả xuống các hương vị

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

7

Lưu ý rằng tùy chọn Dừa được chọn ban đầu do thuộc tính

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

05. Phản ứng, thay vì sử dụng thuộc tính

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

05 này, sử dụng thuộc tính

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

6 trên thẻ gốc

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

08. Điều này thuận tiện hơn trong một thành phần được kiểm soát vì bạn chỉ cần cập nhật nó ở một nơi. Ví dụ

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

2

Dùng thử trên CodePen

Nhìn chung, điều này khiến cho

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

09,

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

3 và

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

4 đều hoạt động rất giống nhau - tất cả chúng đều chấp nhận thuộc tính

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

6 mà bạn có thể sử dụng để triển khai thành phần được kiểm soát

Ghi chú

Bạn có thể chuyển một mảng vào thuộc tính

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

6, cho phép bạn chọn nhiều tùy chọn trong thẻ

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

08

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

9

Thẻ đầu vào tập tin

Trong HTML, một

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

45 cho phép người dùng chọn một hoặc nhiều tệp từ bộ lưu trữ thiết bị của họ để tải lên máy chủ hoặc được JavaScript thao tác thông qua API tệp

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

1

Vì giá trị của nó là chỉ đọc nên nó là thành phần không được kiểm soát trong React. Nó được thảo luận cùng với các thành phần không được kiểm soát khác sau trong tài liệu

Xử lý nhiều đầu vào

Khi bạn cần xử lý nhiều phần tử

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

46 được kiểm soát, bạn có thể thêm thuộc tính

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

47 cho từng phần tử và để hàm xử lý chọn việc cần làm dựa trên giá trị của

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

48

Ví dụ

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

5

Dùng thử trên CodePen

Lưu ý cách chúng tôi sử dụng cú pháp tên thuộc tính được tính toán ES6 để cập nhật khóa trạng thái tương ứng với tên đầu vào đã cho

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

6

Nó tương đương với mã ES5 này

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

0

Ngoài ra, vì

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

5 tự động hợp nhất một phần trạng thái vào trạng thái hiện tại, chúng tôi chỉ cần gọi nó với các phần đã thay đổi

Giá trị Null đầu vào được kiểm soát

Chỉ định chỗ dựa

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

6 trên một thành phần được kiểm soát sẽ ngăn người dùng thay đổi đầu vào trừ khi bạn muốn như vậy. Nếu bạn đã chỉ định một

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

6 nhưng đầu vào vẫn có thể chỉnh sửa được, thì có thể bạn đã vô tình đặt

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

6 thành

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

73 hoặc

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

74

Đoạn mã sau chứng minh điều này. (Đầu vào bị khóa lúc đầu nhưng có thể chỉnh sửa được sau một khoảng thời gian ngắn. )

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        label>
        <input type="submit" value="Submit" />
      form>
    );
  }
}

1

Các lựa chọn thay thế cho các thành phần được kiểm soát

Đôi khi có thể rất tẻ nhạt khi sử dụng các thành phần được kiểm soát, bởi vì bạn cần viết một trình xử lý sự kiện cho mọi cách mà dữ liệu của bạn có thể thay đổi và chuyển tất cả trạng thái đầu vào thông qua một thành phần React. Điều này có thể trở nên đặc biệt khó chịu khi bạn đang chuyển đổi cơ sở mã có sẵn sang React hoặc tích hợp ứng dụng React với thư viện không phải React. Trong những tình huống này, bạn có thể muốn kiểm tra các thành phần không được kiểm soát, một kỹ thuật thay thế để triển khai các biểu mẫu nhập liệu

Giải pháp toàn diện

Nếu bạn đang tìm kiếm một giải pháp hoàn chỉnh bao gồm xác thực, theo dõi các trường đã truy cập và xử lý việc gửi biểu mẫu, Formik là một trong những lựa chọn phổ biến. Tuy nhiên, nó được xây dựng trên cùng một nguyên tắc của các thành phần được kiểm soát và trạng thái quản lý — vì vậy đừng bỏ qua việc tìm hiểu chúng

Đầu vào trong HTML là gì?

Các loại đầu vào khác nhau như sau. .