javascript - React JS 更改文本值并提交

Question

面临此错误:失败的 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函数的功能

Answer 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}/>
  }
})

工作片段(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>