React.js form kết hợp
React form – 2 thành phần
- Bài học này sẽ giúp các bạn biết cách kết hợp xử lý các thành phần trong
<form>.
Mục Lục
React form – 2 thành phần <input />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class ActionButton extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
guestName: "Bùi Văn Tèo"
};
};
handleInputChange = (event) => {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit = (event) => {
alert('Giá trị đã được submit: '
+ this.state.isGoing + ' và '
+ this.state.guestName
);
event.preventDefault();
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Tham gia:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Ghi rõ họ tên:
<input
name="guestName"
type="text"
value={this.state.guestName}
onChange={this.handleInputChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
};
};
ReactDOM.render(
<ActionButton />,
document.getElementById('root')
);
</script>
</body>
</html>
- Ở phần
constructorkhai báo 2 giá trị đầu tiên của<input type="checkbox" />và<input type="text" />. - Trong function
handleInputChangexử lý giá trịtruevàfalsecủa<input type="checkbox" />đồng thời lấy giá trịnamecủa<input type="text" />. - Cũng trong function
handleInputChangesử dụngsetStateđể thực hiện cập nhật giá trị mới cho State. - Funciton
handleSubmitgiữ vai trò gọi 2 giá trị mới của<input type="checkbox" />và<input type="text" />.
Trình duyệt hiển thị
React form – Kết hợp nhiều thành phần
- Tương tự như trên, dựa theo
namevàvalueta có thể sử lý nhiều thành phần của<form>cùng lúc như sau.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class ActionButton extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
guestName: 'Bùi Văn Tèo',
course: 'react.js',
message: 'Your message here'
};
};
handleInputChange = (event) => {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit = (event) => {
alert('Tham gia: '
+ this.state.isGoing + ', họ tên: '
+ this.state.guestName + ', '
+ this.state.course + ' và '
+ this.state.message
);
event.preventDefault();
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Tham gia:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Ghi rõ họ tên:
<input
name="guestName"
type="text"
value={this.state.guestName}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Chọn khóa học:
<select
name="course"
value={this.state.course}
onChange={this.handleInputChange}
>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JAVASCRIPT</option>
<option value="react.js">REACT.JS</option>
</select>
</label>
<br />
<label>
Message:
<textarea
name="message"
type="text"
value={this.state.message}
onChange={this.handleInputChange}
/>
</label>
<br />
<input type="submit" value="Submit" />
</form>
);
};
};
ReactDOM.render(
<ActionButton />,
document.getElementById('root')
);
</script>
</body>
</html>
Trình duyệt hiển thị