Question

我有这个简单的场景。用户单击编辑按钮，他将转到每个字段都填写有表单的页面。他改变了一些东西并点击保存，非常简单。在jquery中我们只是绑定并从DOM中获取值，在angularjs中，2路绑定的工作方式相同，但是如何反应呢？

我经常看到人们通过将输入绑定到onChange来获取表单值，但在编辑情况下，用户可能不会触及每个字段。我不认为需要国家。我需要绑定我的数据

var item = {
    "name":"James",
    "dates": {
    "contract": [
          {"id":1,"name":"1 month","value":false},
          {"id":2,"name":"2 months","value":true}
        ]
    }}

https://jsfiddle.net/p1pztpcw/

我还有一个问题。我收到Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option>.

的警告

Answer 1

对于<select>上<select> React is able to read the props value selected的问题。因此，不推荐在option上使用带有React的<input type="text" ref={(input) => { this.textInput = input; }} />。

关于创建状态的问题，您可以在提交表单时读取每个输入值。可以使用React ref propertie访问每个输入。但是你必须绑定每个输入：

TypeError: Cannot read property 'companyName' of undefined
     at Scope.$scope.companyModify (app.js:8501)
     at $parseFunctionCall (base.js:21610)
     at callback (base.js:30772)
     at Scope.$eval (base.js:23672)
     at Scope.$apply (base.js:23771)
     at HTMLButtonElement.<anonymous> (base.js:30777)
     at HTMLButtonElement.dispatch (base.js:4430)
     at HTMLButtonElement.elemData.handle (base.js:4116)

Answer 2

最佳解决方案是使用更改并调用单个函数。如果你想在函数内部使用，你可以使用switch语句。

关于警告：使用

RewriteCond %{HTTPS} off
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

而不是在

中指定它

<select value={obj.id}>

Answer 3

使用refs可以访问输入字段，而对于select，您必须在更改时进行处理。您不需要处理所有内容，即使您使用的是Redux，也无法修改状态，因此您无法处理句柄事件并调用this.setState(...);

您基本上可以使用this.refs.refName.value直接访问该值，也可以使用函数设置值ref={(input) => { this.input = input; }}，然后通过this.input访问它。

您可以阅读完整的文档here。

对于select上的默认值，根据ReactJS docs使用value={this.state.value}即可。如果您收到警告，可能是由其他原因造成的。

如果你使用像Redux这样的框架，你不能（或者你不应该）修改状态，你应该在handleChange上调度一个动作，而不是设置状态。

但是如果你不想handlres同时使用refs，那么你应该考虑从ReactJS转移。我更喜欢使用refs因为它感觉更干净。

这里有一个有效的例子：

var Hello = React.createClass({
  handleSave: function(){
    alert('name: ' + this.refs.input.value)
    alert('selectValue: ' + this.state.selectValue)
  },
  render: function() {
    var item = {
    "name":"James",
    "dates": {
    "contract": [
          {"id":1,"name":"1 month","value":false},
          {"id":2,"name":"2 months","value":true}
        ]
    }}

    return (
      <div>
        <input type="text" value={item.name} ref={'input'}/>

        <select className="form-control" onChange={this.handleChange.bind(this)} >
          {item.dates.contract.map(obj => 
            <option value={obj.id}  selected={obj.value}>{obj.name}</option>
          )}
        </select>
    <button onClick={this.handleSave.bind(this)}>Save form</button></div>)
  },
  handleChange:function(e){
    this.setState({selectValue: e.target.value});
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

JQuery的

ReactJS Team不推荐使用JQuery，因为JQuery完全取消了对ReactJS的DOM的控制，这可能导致不良行为。我们选择了ReactJS为我们控制DOM。实际上根本不需要使用JQuery。

表格提交使用反应而没有状态

3 个答案:

JQuery的