search

Giá trị mặc định của ngày kiểm soát biểu mẫu Reac-bootstrap

Ngày đăng: 05/02/2023
Trả lời: 0
Lượt xem: 20

Trong hầu hết các trường hợp, chúng tôi khuyên bạn nên sử dụng để triển khai biểu mẫu. Trong một thành phần được kiểm soát, dữ liệu biểu mẫu được xử lý bởi một thành phần React. Thay thế là các thành phần không được kiểm soát, trong đó dữ liệu biểu mẫu được xử lý bởi chính DOM

Show

Để viết một thành phần không được kiểm soát, thay vì viết một trình xử lý sự kiện cho mỗi lần cập nhật trạng thái, bạn có thể sử dụng một tham chiếu để nhận các giá trị biểu mẫu từ DOM

Ví dụ: mã này chấp nhận một tên duy nhất trong thành phần không được kiểm soát

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);    event.preventDefault();
  }

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

Dùng thử trên CodePen

Vì một thành phần không được kiểm soát giữ nguồn sự thật trong DOM, nên đôi khi việc tích hợp mã React và không phải React sẽ dễ dàng hơn khi sử dụng các thành phần không được kiểm soát. Nó cũng có thể ít mã hơn một chút nếu bạn muốn nhanh và bẩn. Mặt khác, bạn thường nên sử dụng các thành phần được kiểm soát

Nếu vẫn chưa rõ bạn nên sử dụng loại thành phần nào cho một tình huống cụ thể, bạn có thể thấy bài viết này về đầu vào được kiểm soát và không được kiểm soát sẽ hữu ích

Giá trị mặc định

Trong vòng đời kết xuất React, thuộc tính value trên các phần tử biểu mẫu sẽ ghi đè giá trị trong DOM. Với một thành phần không được kiểm soát, bạn thường muốn React chỉ định giá trị ban đầu, nhưng không kiểm soát được các bản cập nhật tiếp theo. Để xử lý trường hợp này, bạn có thể chỉ định thuộc tính defaultValue thay vì value. Việc thay đổi giá trị của thuộc tính defaultValue sau khi một thành phần được gắn kết sẽ không gây ra bất kỳ cập nhật nào về giá trị trong DOM

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

Tương tự như vậy, 

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"          type="text"
          ref={this.input} />
      label>
      <input type="submit" value="Submit" />
    form>
  );
}
1 và 
render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"          type="text"
          ref={this.input} />
      label>
      <input type="submit" value="Submit" />
    form>
  );
}
2 hỗ trợ 
render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"          type="text"
          ref={this.input} />
      label>
      <input type="submit" value="Submit" />
    form>
  );
}
3, và