Tôi đang bắt đầu với React.js và tôi muốn thực hiện một biểu mẫu đơn giản nhưng trong tài liệu tôi đã tìm thấy hai cách để thực hiện.
Cách đầu tiên đang sử dụng Refs :
var CommentForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var author = React.findDOMNode(this.refs.author).value.trim();
var text = React.findDOMNode(this.refs.text).value.trim();
if (!text || !author) {
return;
}
// TODO: send request to the server
React.findDOMNode(this.refs.author).value = '';
React.findDOMNode(this.refs.text).value = '';
return;
},
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" />
<input type="text" placeholder="Say something..." ref="text" />
<input type="submit" value="Post" />
</form>
);
}
});
Và cái thứ hai là sử dụng trạng thái bên trong thành phần React:
var TodoTextInput = React.createClass({
getInitialState: function() {
return {
value: this.props.value || ''
};
},
render: function() /*object*/ {
return (
<input className={this.props.className}
id={this.props.id}
placeholder={this.props.placeholder}
onBlur={this._save}
value={this.state.value}
/>
);
},
_save: function() {
this.props.onSave(this.state.value);
this.setState({value: ''
});
});
Tôi không thể thấy ưu và nhược điểm của hai lựa chọn thay thế, nếu một số tồn tại. Cảm ơn.
Am i thiếu cái gì ở đây? Tại sao bạn không sử dụng đối tượng sự kiện để nhận các giá trị biểu mẫu? Đó dường như là lý do duy nhất để sử dụng một biểu mẫu ở đây ngay từ đầu. Nếu bạn không sử dụng hành vi gửi mặc định và có giới thiệu về các đầu vào, bạn không cần phải gói chúng trong một biểu mẫu.
—
NectarSoft