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

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

Để 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 [
      
        
          Name:
                  
        
      
    ];
  }
}

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 [
    
      
        Name:
        
      
      
    
  ];
}

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

render[] {
  return [
    
      
        Name:
        
      
      
    
  ];
}

1 và

render[] {
  return [
    
      
        Name:
        
      
      
    
  ];
}

2 hỗ trợ

render[] {
  return [
    
      
        Name:
        
      
      
    
  ];
}

3, và và hỗ trợ defaultValue

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

Trong HTML, một

render[] {
  return [
    
      
        Name:
        
      
      
    
  ];
}

7 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

Trong React, một

render[] {
  return [
    
      
        Name:
        
      
      
    
  ];
}

8 luôn là một thành phần không được kiểm soát vì giá trị của nó chỉ có thể được đặt bởi người dùng chứ không phải theo lập trình

Bạn nên sử dụng API tệp để tương tác với các tệp. Ví dụ sau đây cho thấy cách tạo tham chiếu đến nút DOM để truy cập [các] tệp trong trình xử lý gửi

Ngày mặc định của React bootstrap là gì?

Làm cách nào để đặt giá trị mặc định trong bootstrap chọn?

Điều khiển biểu mẫu mặc định trong bootstrap là gì?

Làm cách nào tôi có thể nhận được giá trị của điều khiển biểu mẫu React bootstrap?