我从React.js开始,我想做一个简单的表格,但是在文档中我找到了两种方法。
在第一种是使用 参考文献 :
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> ); } });
和第二个是使用 状态 内的阵营组分:
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: '' }); });
如果存在,我看不到这两种选择的优缺点。谢谢。
简短版本:避免引用。
它们不利于可维护性,并且失去了所见即所得模型渲染所提供的许多简单性。
您有一个表格。您需要添加一个按钮来重置表单。
您在输入中有一个CCV数字字段,而在应用程序中还有一些其他数字字段。现在您需要强制用户仅输入数字。
嗯,没关系,项目经理希望我们在无效的情况下只绘制一个红色的阴影。
我们需要将控制权交还给父母。数据现在在道具中,我们需要对更改做出反应。
sed -e 's/this.state/this.props/' 's/handleChange/onChange/' -i form.js
人们认为裁判比保持状态更“容易”。这可能在最初的20分钟内是正确的,但根据我的经验,那是不正确的。让您自己说“是的,我会在5分钟内完成”,而不是“当然,我会重写一些组件”。