Xử lý các biểu mẫu trong React

Cách xử lý các biểu mẫu trong ứng dụng React

Biểu mẫu là một trong số ít các phần tử HTML tương tác theo mặc định.

Chúng được thiết kế để cho phép người dùng tương tác với một trang.

Công dụng phổ biến của các biểu mẫu?

  • Tìm kiếm
  • Các hình thức liên hệ
  • Thanh toán giỏ hàng
  • Đăng nhập và đăng ký
  • và hơn thế nữa!

Sử dụng React, chúng tôi có thể làm cho các biểu mẫu của mình tương tác hơn và ít tĩnh hơn.

Có hai cách chính để xử lý các biểu mẫu trong React, khác nhau ở cấp độ cơ bản: cách dữ liệu được quản lý.

  • nếu dữ liệu được xử lý bởi DOM, chúng tôi gọi chúng làcác thành phần không được kiểm soát
  • nếu dữ liệu được xử lý bởi các thành phần mà chúng tôi gọi làcác thành phần được kiểm soát

Như bạn có thể tưởng tượng, các thành phần được kiểm soát là thứ bạn sẽ sử dụng hầu hết thời gian. Trạng thái thành phần là nguồn chân lý duy nhất, chứ không phải là DOM. Nhưng đôi khi bạn buộc phải sử dụng các thành phần không kiểm soát, chẳng hạn như khi sử dụng một số trường biểu mẫu vốn dĩ không được kiểm soát vì hành vi của chúng, như<input type="file">cánh đồng.

Khi trạng thái phần tử thay đổi trong trường biểu mẫu do một thành phần quản lý, chúng tôi theo dõi nó bằng cách sử dụngonChangethuộc tính.

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
  }

handleChange(event) {}

render() { return ( <form> Username: <input type=“text” value={this.state.username} onChange={this.handleChange} /> </form> ) } }

Với các thành phần lớp, để thiết lập trạng thái mới, chúng ta phải ràng buộcthisđếnhandleChangephương pháp, nếu khôngthiskhông thể truy cập từ bên trong phương thức đó:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
  }

handleChange(event) { this.setState({ username: event.target.value }) }

render() { return ( <form> <input type=“text” value={this.state.username} onChange={this.handleChange} /> </form> ) } }

Tương tự, chúng tôi sử dụngonSubmitthuộc tính trên biểu mẫu để gọihandleSubmitkhi biểu mẫu được gửi:

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

handleChange(event) { this.setState({ username: event.target.value }) }

handleSubmit(event) { alert(this.state.username) event.preventDefault() }

render() { return ( <form onSubmit={this.handleSubmit}> <input type=“text” value={this.state.username} onChange={this.handleChange} /> <input type=“submit” value=“Submit” /> </form> ) } }

Sử dụngmóctất cả đều đơn giản hơn nhiều:

const Form = props => {
  const [username, setUsername] = useState()

const handleChangeUsername = e => { setUsername(e.target.value) }

const handleSubmit = event => { alert(username) event.preventDefault() }

render() { return ( <form onSubmit={handleSubmit}> Username: <input type=“text” value={username} onChange={handleChangeUsername} /> </form> ) } }

Việc xác thực trong một biểu mẫu có thể được xử lý tronghandleChangephương pháp: bạn có quyền truy cập vào giá trị cũ của trạng thái và giá trị mới. Bạn có thể kiểm tra giá trị mới và nếu không hợp lệ, hãy từ chối giá trị đã cập nhật (và thông báo giá trị đó theo một cách nào đó cho người dùng).

Biểu mẫu HTML không nhất quán. Họ có một lịch sử lâu đời, và điều đó cho thấy. Tuy nhiên, React làm cho mọi thứ nhất quán hơn với chúng tôi và bạn có thể nhận (và cập nhật) các trường bằng cách sử dụngvaluethuộc tính.

Đây là mộttextarea, ví dụ:

<textarea value={this.state.address} onChange={this.handleChange} />

Điều tương tự cũng xảy ra vớiselectnhãn:

<select value="{this.state.age}" onChange="{this.handleChange}">
  <option value="teen">Less than 18</option>
  <option value="adult">18+</option>
</select>

Trước đây chúng tôi đã đề cập đến<input type="file">cánh đồng. Điều đó hoạt động hơi khác một chút.

Trong trường hợp này, bạn cần lấy tham chiếu đến trường bằng cách gánrefthuộc tính cho một thuộc tính được xác định trong hàm tạo vớiReact.createRef()và sử dụng điều đó để nhận giá trị của nó trong trình xử lý gửi:

class FileInput extends React.Component {
  constructor(props) {
    super(props)
    this.curriculum = React.createRef()
    this.handleSubmit = this.handleSubmit.bind(this)
  }

handleSubmit(event) { alert(this.curriculum.current.files[0].name) event.preventDefault() }

render() { return ( <form onSubmit={this.handleSubmit}> <input type=“file” ref={this.curriculum} /> <input type=“submit” value=“Submit” /> </form> ) } }

Đây làcác thành phần không được kiểm soátđường. Trạng thái được lưu trữ trong DOM thay vì ở trạng thái thành phần (lưu ý rằng chúng tôi đã sử dụngthis.curriculumđể truy cập vào tệp đã tải lên và không chạm vàostate.

Tôi biết bạn đang nghĩ gì - ngoài những điều cơ bản đó, phải có một thư viện đơn giản hóa tất cả những thứ xử lý biểu mẫu này và tự động hóa xác thực, xử lý lỗi và hơn thế nữa, phải không? Có một điều tuyệt vời,Formik.

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: