Question

遇到此错误：propType失败：您向没有value处理程序的表单字段提供了onChange道具。这将呈现一个只读字段。如果该字段应该是可变的，请使用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翻译后丑陋）。

＆＃13;

"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'));

＆＃13;

<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>

＆＃13;

React JS更改文本值并提交

1 个答案: