React JS 更改文本值并提交答案

【问题标题】：React JS Change text value and submitReact JS 更改文本值并提交
【发布时间】：2015-12-15 10:51:26
【问题描述】：

面对此错误：失败的 propType：您向没有 onChange 处理程序的表单字段提供了 value 道具。这将呈现一个只读字段。如果该字段应该是可变的，请使用defaultValue。否则，设置onChange 或readOnly。检查BasicInputBox的渲染方法。

我正在返回以下组件：

<BasicInputBox label="Student Name :" valChange={this.nameChange} value={datafield.name}/>

和组件：

var BasicInputBox = React.createClass({
    render: function() {
    return <div>
        <tr>
        <td><label> { this.props.label } </label></td>
        <td><input type="text" onChange={ this.props.valChange } value={ this.props.value } /></td>
      </tr>
    </div>
    }
});

在文本字段中更改时值不会更改。以下是nameChange函数的作用

【问题讨论】：

nameChange: function(event){ this.setState({name: event.target.value}) },
我们是否可以假设value 将通过渲染调用正确更新，并且nameChange 将在某处更改状态，从而导致重新渲染？看看那段代码会很有帮助。
tr 不是div 的合法子代。请显示更多代码并确保它干净且有效（直到您遇到问题为止）。
See spec：可以使用此元素的上下文。 tr 元素不能出现在任何地方。

标签： javascript php reactjs

【解决方案1】：

假设您未共享的部分工作正常，您的代码似乎工作正常。

如果您遇到问题，可能是在侦听器中或在父组件的渲染中。这是您的元素的一个工作示例（注意：我稍微修改了结构以确保合法的 html）：

var BasicInputBox = React.createClass({
    render: function() {
    return <div>
        <label> { this.props.label } </label>
        <input type="text" onChange={ this.props.valChange } value={ this.props.value } />
    </div>
    }
});
var Wrapper = React.createClass({
  getInitialState: function() {
    return {
      datafield: {
        name: ''
      }      
    }
  },
  nameChange: function(e) {

    this.setState({datafield: {name: e.currentTarget.value}})

  },
  render: function() {
    let datafield = this.state.datafield
    return <BasicInputBox label="Student Name :" valChange={this.nameChange} value={datafield.name}/>
  }
})

工作 sn-p（babel/jsx 翻译后很丑）。

"use strict";

var BasicInputBox = React.createClass({
  displayName: "BasicInputBox",

  render: function render() {
    return React.createElement(
      "div",
      null,
      React.createElement(
        "tr",
        null,
        React.createElement(
          "td",
          null,
          React.createElement(
            "label",
            null,
            " ",
            this.props.label,
            " "
          )
        ),
        React.createElement(
          "td",
          null,
          React.createElement("input", { type: "text", onChange: this.props.valChange, value: this.props.value })
        )
      )
    );
  }
});
var Wrapper = React.createClass({
  displayName: "Wrapper",

  getInitialState: function getInitialState() {
    return {
      datafield: {
        name: ''
      }
    };
  },
  nameChange: function nameChange(e) {
    this.setState({ datafield: { name: e.currentTarget.value } });
  },
  render: function render() {
    var datafield = this.state.datafield;
    return React.createElement(BasicInputBox, { label: "Student Name :", valChange: this.nameChange, value: datafield.name });
  }
});

ReactDOM.render(React.createElement(Wrapper, null), document.getElementById('app'));

<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<div id="app"></div>

【讨论】：