React JS更改文本值並提交

Question

遇到此錯誤：propType失敗：您向沒有onChange處理程序的表單字段提供了一個value prop。 這將呈現一個只讀字段。 如果該字段是可變字段，請使用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>