Làm việc với FORM trong React
Trong React, thực sự không có nhiều cách để làm việc với Form. Nó không quá khác khi bạn tạo form với DOM APIs trong Javascript thông thường. Tôi nghĩ điều đó thật tuyệt vời.
Bạn có thể thêm event vào hàm onSubmit trên Form. Sau đó, nó sẽ liên kết với form của bạn và các element trong form để giúp bạn xử lí form hiệu quả hơn. Bạn có một input và alert giá trị của nó khi submit form.
import * as React from 'react'
function UsernameForm({onSubmitUsername}) {
return (
<form>
<div>
<label>Username:</label>
<input type="text" />
</div>
<button type="submit">Submit</button>
</form>
)
}
function App() {
const onSubmitUsername = username => alert(`You entered: ${username}`)
return <UsernameForm onSubmitUsername={onSubmitUsername} />
}
export default App
Có một số cách để lấy giá trị của một input trong form như sau:
- Thông qua index: event.target.elements[0].value
- Thông qua name hoặc id: event.target.elements.usernameInput.value
- Một số cách khác
Đáp án:
import * as React from 'react'
function UsernameForm({onSubmitUsername}) {
function handleSubmit(event) {
event.preventDefault()
onSubmitUsername(event.target.elements.usernameInput.value)
}
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="usernameInput">Username:</label>
<input id="usernameInput" type="text" />
</div>
<button type="submit">Submit</button>
</form>
)
}
function App() {
const onSubmitUsername = username => alert(`You entered: ${username}`)
return <UsernameForm onSubmitUsername={onSubmitUsername} />
}
export default App
Sử dụng refs
Một cách khác để lấy giá trị của input trong Form là sử dụng ref trong React. Ref là một object giữ một giá trị không đổi qua các lần re-render của component. Nó có current property để bạn lấy giá trị của ref.
Bạn hãy sử dụng ref để lấy giá trị của input trong bài tập 1 bằng ref.
Đáp án:
import * as React from 'react'
function UsernameForm({onSubmitUsername}) {
const usernameInputRef = React.useRef()
function handleSubmit(event) {
event.preventDefault()
onSubmitUsername(usernameInputRef.current.value)
}
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="usernameInput">Username:</label>
<input id="usernameInput" type="text" ref={usernameInputRef} />
</div>
<button type="submit">Submit</button>
</form>
)
}
function App() {
const onSubmitUsername = username => alert(`You entered: ${username}`)
return <UsernameForm onSubmitUsername={onSubmitUsername} />
}
export default App
Validate lower-case cho input
Với React, bạn có thể sử dụng một hook đặc biệt gọi là useState. Ví dụ đơn giản như sau:
function Counter() {
const [count, setCount] = React.useState(0)
const increment = () => setCount(count + 1)
return <button onClick={increment}>{count}</button>
}
React.useState nhận vào giá trị mặc định và return về một array. Sau đó, bạn có thể descontruct cái array để lấy state và hàm updater của state đó. Tham khảo: https://reactjs.org/docs/hooks-state.html
Trong bài tập này, chúng ta giả sử rằng username input chỉ chấp nhận ký tự chữ thường(lower-case). Nếu người dùng gõ vào chữ hoa, bạn phải hiện error message.
Nếu bạn muốn form được dynamic thì bạn cần phải:
- Component state phải lưu giá trị đông(dynamic value)- ở đây là error message.
- Thêm một change handler vào input để chúng ta biết được giá trị mà người dùng đã thay đổi.
Bài tập này hơi khó một tí nên bạn có thể tham khảo một số bước sau nhe:
Tạo một function handleChange nhận event là tham số và sử dụng event.target.value để lấy giá trị của input. Nhớ rằng là event này chạy khi từ input, chứ không phải form
Sử dụng giá trị của input để xét xem có lỗi hay không. Lỗi xảy ra khi người dùng nhập giá trị chữ in hoa. Bạn có thể validate như sau: const isValid = value === value.loLowerCase()
Nếu có lỗi bạn set error state là: “Username must be lower case”.
Và cuối cùng là hiển thị lỗi lên một element.
Đáp án:
import * as React from 'react'
function UsernameForm({onSubmitUsername}) {
const [error, setError] = React.useState(null)
function handleSubmit(event) {
event.preventDefault()
onSubmitUsername(event.target.elements.usernameInput.value)
}
function handleChange(event) {
const {value} = event.target
const isLowerCase = value === value.toLowerCase()
setError(isLowerCase ? null : 'Username must be lower case')
}
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="usernameInput">Username:</label>
<input id="usernameInput" type="text" onChange={handleChange} />
</div>
<div role="alert" style={{color: 'red'}}>
{error}
</div>
<button disabled={Boolean(error)} type="submit">
Submit
</button>
</form>
)
}
function App() {
const onSubmitUsername = username => alert(`You entered: ${username}`)
return (
<div style={{minWidth: 400}}>
<UsernameForm onSubmitUsername={onSubmitUsername} />
</div>
)
}
export default App
Điều khiển giá trị của input
Thỉnh thoảng bạn sẽ cần control input của một trong một số trường hợp. Có thể bạn cần set giá trị của input khi người dùng click nút nào đó. Có thể bạn muốn thay đổi giá trị mà người dùng nhập vào.
Đó là lí do React hỗ trợ Controlled Form input. Hiện tại trong bài tập của chúng ta thì form là kiểu “uncontrolled” có nghĩa là trình duyệt đang giúp bạn quản lý giá trị của input và chúng ta sẽ được thông báo giá trị thay đổi thông qua những event như handleChange.
Nếu bạn cố ý muốn set lại giá trị cho input thì bạn có thể làm như sau: inputNode.value = ‘value’. Nhưng nó có vẻ hơi khó. Cho nên, React cho phép bạn set giá tri của input như sau:
<input value={myInputValue} />
Khi chúng ta làm điều này thì React sẽ đảm bảo rằng gia trị của input luôn là gia trị của biến myInputValue.
Bạn cần phải lưu giá trị của input username vào state(React.useState) và thêm onChange vào input để set lại giá trị cho input đó. Do ở đây, chúng ta có thể điều khiển giá trị của input nên chúng ta có thể chuyển về giá trị chữ thường bằng hàm toLowerCase() nên không bằng lưu error state nữa.
Bạn hãy thử dùng controlled form để viết lại form ở bài tập trên.
Đáp án:
import * as React from 'react'
function UsernameForm({onSubmitUsername}) {
const [username, setUsername] = React.useState('')
function handleSubmit(event) {
event.preventDefault()
onSubmitUsername(username)
}
function handleChange(event) {
setUsername(event.target.value.toLowerCase())
}
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="usernameInput">Username:</label>
<input
id="usernameInput"
type="text"
onChange={handleChange}
value={username}
/>
</div>
<button type="submit">Submit</button>
</form>
)
}
function App() {
const onSubmitUsername = username => alert(`You entered: ${username}`)
return (
<div style={{minWidth: 400}}>
<UsernameForm onSubmitUsername={onSubmitUsername} />
</div>
)
}
export default App
All rights reserved
