Thẻ biểu mẫu html

Question

Trong React, phần tử biểu mẫu HTML sẽ hoạt động hơi khác một chút so với các phần tử DOM còn lại, phần tử biểu mẫu sẽ giữ và tự xử lý một số trạng thái nội bộ (trạng thái bên trong) của riêng nó. Ví dụ như biểu mẫu dưới đây trong HTML sẽ nhận giá trị của tên đầu vào

Nội dung chính Show

Thành phần được kiểm soát
Vùng văn bản gắn thẻ
chọn thẻ
Tập tin đầu vào thẻ
Xử lý nhiều thẻ đầu vào
Controlled Input with null value
Lựa chọn thay thế cho Thành phần được kiểm soát
Full solution

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

Biểu mẫu thẻ này có các hành động của một biểu mẫu HTML mặc định. đó là khi người dùng nhấn vào nút sumit để gửi thông tin, nó vẫn sẽ duyệt (chuyển trang) sang một trang mới. Và tất nhiên ở React thì form element vẫn sẽ xử lý phơi bày như thế. Nhưng ở những trường hợp thường gặp, sẽ thuận tiện hơn khi ta sử dụng một hàm (function) trong Javascript để xử lý quá trình gửi dữ liệu (submission) của biểu mẫu, hàm đó sẽ có thể truy cập vào dữ liệu (data) . Các thuật toán vừa được cập nhật ở trên là một quy chuẩn có tên “các thành phần được kiểm soát”

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

Trong HTML, các phần tử 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, hay

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 thường sẽ tự quản lý trạng thái của chúng và tự động cập nhật dựa trên dữ liệu người dùng nhập vào. Còn với React, các trạng thái thay đổi (trạng thái có thể thay đổi) thì sẽ được giữ nguyên trạng thái của thành phần và chỉ được cập nhật khi sử dụng hàm

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 hai cách xử lý lí do đó lại với nhau bằng cách sử dụng trạng thái React như một “nguồn dữ liệu đáng tin cậy duy nhất” (nguồn sự thật duy nhất). Thành phần khi thực hiện kết xuất một phần tử biểu mẫu sẽ kiểm tra xem điều gì đang xảy ra với phần tử biểu mẫu khi người dùng nhập vào. Một phần tử biểu mẫu đầu vào mà giá trị của nó được điều khiển bởi React bằng phương pháp đã nêu trên, được gọi là một “thành phần được kiểm soát”

Từ đoạn mã ví dụ ở phía trên, nếu ta muốn xuất màn hình thông báo chứa dữ liệu nhập vào khi biểu mẫu được gửi, ta có thể viết biểu mẫu theo định dạng của một thành phần được kiểm soát, như đoạn mã sau đâ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>
    );
  }
}

Thử trên Codepen

Khi 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 gán vào phần tử biểu mẫu, giá trị hiển thị trên màn hình 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. Sau mỗi lần tương tác với bàn phím,

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 được gọi để cập nhật lại Trạng thái phản ứng, giá trị hiển thị trên màn hình sẽ luôn được cập nhật mỗi khi người dùng nhập bàn phím

Đối chiếu 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 của React. Điều này có nghĩa là bạn phải nhập (gõ) nhiều mã hơn một chút, từ đó bạn có thể truyền giá trị này đến các thành phần (phần tử) khác của giao diện người dùng, hoặc là làm mới (đặt lại) nó từ những sự kiện (

Vùng văn bản gắn thẻ

Trong HTML, một 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>
    );
  }
}

3 sẽ chứa các đoạn văn bản bên trong 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

Còn với React, thay vì nằm bê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>
    );
  }
}

3 sẽ 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 để lưu trữ các đoạn văn bản. Khi sử dụng cách này, một biểu mẫu có chứ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>
    );
  }
}

3 sẽ có thể được biểu thị bằng diễn đàn tương tự như một biểu mẫu sử dụng đầu vào thẻ tự đó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>
    );
  }
}

03 (nhập 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>
    );
  }
}

5

Chú ý 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 động bên trong hàm khởi tạo (hàm tạo) nên vùng văn bản sẽ hiển thị một vài câu chữ mà quá trình khởi động được tạo ra

chọn thẻ

Trong HTML, ta sử dụng 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>
    );
  }
}

4 để tạo danh sách thả xuống. Ở ví dụ bên dưới là một danh sách thả xuống chứa các hương vị trái câ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>
    );
  }
}

8

Như đoạn mã phía trên , 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>
    );
  }
}

06 ‘Coconut’ sẽ là giá trị khởi tạo của 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>
    );
  }
}

07 vì nó có 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>
    );
  }
}

08. Trong Phản ứng, thay 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>
    );
  }
}

08, sẽ 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 ở 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>
    );
  }
}

07. Có thể thấy việc sử dụng thành phần được kiểm soát thuận tiện hơn rất nhiều vì chỉ cần cập nhật dữ liệu ở một nơi duy nhất. Ví dụ cụ thể ở phía dướ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

Thử trên Codepen

Tổng hợp lại, ta có thể thấy 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>
    );
  }
}

52,

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 tương tự nhau, tất cả chúng đều nhận vào một 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 từ đó trở thành một thành phần được kiểm soát

Lưu ý

Bạn có thể truyề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, điều đó sẽ giúp bạn có thể chọn được nhiều tùy chọn trọng 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>
    );
  }
}

07

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

Tập tin đầu vào thẻ

Trong HTML, 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>
    );
  }
}

58 cho phép người dùng chọn một hoặc nhiều tệp từ bộ nhớ trong thiết bị của họ, sao những tệp đó sẽ được gửi lên máy chủ hoặc được tùy biến bởi Javascript 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>
    );
  }
}

4

Bời vì giá trị của tệp đầu vào chặn quyền ghi (chỉ đọc), nên nó là một thành phần không được kiểm soát trong React. Chúng ta sẽ bàn về thẻ này cùng với các thành phần không được kiểm soát khác ở một phần chi tiết khác ở phần này

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

Khi bạn cần xử lý nhiều điều khiể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>
    );
  }
}

59, 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>
    );
  }
}

80 vào từng phần tử và để hàm xử lý (hàm xử lý) lựa chọn các phần tử chính xác đang tương tác với người dùng thông qua

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>
    );
  }
}

81

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>
    );
  }
}

8

Thử trên Codepen

Đây là cách sử dụng cú pháp tên thuộc tính tính toán trong ES6 để cập nhật trạng thái đúng với các đầu vào dược định danh bằng tê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>
    );
  }
}

9

Đoạn mã phía trước tương tự với đoạn mã ES5 sau

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, kể từ khi

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 mở rộng các phần của trạng thái thành trạng thái hiện tại, ta chỉ cần gọi hàm

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 đối với các phần của trạng thái đã bị thay đổi

Controlled Input with null value

Cũng có ngoại lệ, giá trị của prop trong một thành phần được kiểm soát sẽ ngăn người dùng thay đổi nó trừ khi bạn muốn như vậy. Nếu bạn đã cung cấp 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 thẻ vẫn có khả năng bị sửa đổi, bạn đã vô tình gá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>
    );
  }
}

6 bằng 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>
    );
  }
}

86 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>
    );
  }
}

87

Đoạn mã bên dưới sẽ làm rõ điều ta vừa đề cập. (Đầu vào đã được gán giá trị khi bạn bắt đầu nhưng trở nên có thể được sửa đổi sau một khoảng thời gian chờ đợ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>
    );
  }
}

1

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

Đôi khi việc sử dụng thành phần bộ điều khiển hơi nhạt, bởi vì bạn cần phải viết một hàm xử lý sự kiện (trình xử lý sự kiện) cho tất cả các trường hợp làm thay đổi dữ liệu và kết nối lại tất cả các trạng thái đầu vào thông qua React . Nó còn phức tạp hơn khi bạn đang cố chuyển codebase cũ sang React, hay là việc tích hợp React vào một ứng dụng khác. Trong các trường hợp đó, có thể bạn sẽ muốn thử các thành phần không được kiểm soát, một cách thay thế để xử lý biểu mẫu nhập liệu

Full solution

Nếu bạn đang tìm kiếm một giải pháp đầy đủ, bao gồm cả việc kiểm tra, theo dõi các trường đã bị tác động, hoặc xử lý việc gửi biểu mẫu, thì Formik là một trong những lựa chọn thông tin lựa chọn. Tuy nhiên, formik được xây dựng dựa trên các nguyên tắc về các thành phần được kiểm soát và quản lý nhà nước - vì thế không cần phải cố gắng tìm hiểu sâu về Formik đâu.

programming html

Thẻ biểu mẫu html

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

Vùng văn bản gắn thẻ

chọn thẻ

Tập tin đầu vào thẻ

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

Controlled Input with null value

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

Full solution

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội