Chuyển tiếp ref có nghĩa là ref sẽ được truyền cho một thành phần con. Trong bài viết này tôi sẽ giới thiệu cách để có được giá trị bằng cách ref trong một hình thức có nhiều đầu vào. Ví dụ: chúng tôi luôn có một biểu mẫu với 2 trường: email và mật khẩu như thế này: LoginForm.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // LoginForm.js class LoginForm extends PureComponent { formRef = React.createRef() render() { const inputs = [{ placeholder: 'Enter your email', error: '', type: 'email' }, { placeholder: 'Enter your password', error: '', type: 'password' }] return ( <FormAuth onClick={this.checkValidationForm} inputs={inputs} buttonTitle='Login' ref={this.formRef} /> ) } } |
Chúng tôi đã tạo một ref cho thành phần cha mẹ, bây giờ chúng tôi chuyển tiếp ref cho một thành phần con.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | // FormAuth.js import React from 'react' import { Form, Button } from 'react-bootstrap' import FormInput from './FormInput' import './styles/formAuth.css' const FormAuth = React.forwardRef((props, ref) => { const { onClick, inputs, buttonTitle } = props return ( <Form ref={ref} // pass ref into form onSubmit={(e) => { e.preventDefault() onClick() }}> { inputs.map((item, index) => ( <FormInput key={`form${index}`} input={item} /> )) } <Button variant="info" type="submit">{buttonTitle}</Button> </Form> ) }) export default FormAuth |
Như chúng ta có thể thấy, trong hình thức này, chúng ta có 2 đầu vào, chúng ta không cần sử dụng ref trực tiếp từ đầu vào. Chúng tôi cũng chuyển tiếp refs cho đầu vào linh kiện trẻ em
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // FormInput.js import React, { useState } from 'react' import { Form } from 'react-bootstrap' const FormInput = React.forwardRef((props, ref) => { const [text, setText] = useState('') const { input } = props return ( <Form.Group> <Form.Control className="form-input" type={input.type} placeholder={input.placeholder} onChange={(e) => setText(e.target.value)} value={text} ref={ref} /> {input.error && <p className="error">{input.error}</p>} </Form.Group> ) }) |
Để có được giá trị của mỗi đầu vào, bạn có thể làm theo điều này:
1 2 3 | const email = this.formRef.current[0].value const password = this.formRef.current[1].value |
Với ref, bạn không cần sử dụng trạng thái để lưu email hoặc mật khẩu, ngăn chặn kết xuất nhiều lần.