入力テキスト子コンポーネントは、入力中にテキストを表示しません。親コンポーネントからonChange関数を渡します。

Question

私は、プロップ "setAuthorState"を "AuthorForm"に渡すコントローラーコンポーネント "ManageAuthorPage"を持っています（このprop関数は、子コンポーネントをレンダリングします）。

"AuthorForm"は、 "setAuthorState" propが再び小道具として渡される追加入力コンポーネント "Input"を持つフォームを表示する責任があります。

入力コンポーネントに入力すると、入力フィールドにテキストが表示されません。

ITSは「setAuthorStateが」triggredされているが、状態確認値は、唯一のキーを押して、次のキーストロークに別のもので上書きされます更新していることが示されたことを確認しました。しかし、これはテキストフィールドにテキストを表示しません。ここ

は私の三つのファイルの内容です：

var React = require('react'); 

var Input = require('../common/textinput'); 


var AuthorForm = React.createClass({ 
    render: function(){ 
     return(
      <form> 
       <h1>Manage author</h1> 
       <Input 
        name="first Name" 
        label = "First Name" 
        onChange= {this.props.onChange} 
        value={this.props.author.firstName} 
       /> 

       <Input 
        name="last Name" 
        label = "Last Name" 
        onChange= {this.props.onChange} 
        value={this.props.author.lastName} 
       /> 

       <br /> 
       <input type="submit" value="Save" className="btn btn-default" /> 
      </form> 
     ) 
    } 
}); 

module.exports = AuthorForm; 

3）textInput.js

1）ManageAuthorPage.js

"use strict"; 

var React = require('react'); 
var AuthorForm = require('./authorForm'); 

var ManageAuthorPage = React.createClass({ 
    getInitialState: function(){ 
     return{ 
      author: {id: '', firstName: '', lastName: ''} 
     }; 
    }, 

    setAuthorState: function(event){ 
     var field = event.target.name; 
     var value = event.target.value; 
     this.state.author[field] = value; 
     return this.setState({author: this.state.author}); 


    }, 

    render: function(){ 
     return(
      <div className=""> 
       <AuthorForm onChange={this.setAuthorState} author= {this.state.author} /> 
      </div> 
     ) 
    } 
}); 

module.exports = ManageAuthorPage; 

2）AuthorForm.js

"use strict" 

var React = require('react'); 

var Input = React.createClass({ 
    propTypes: { 
     name: React.PropTypes.string.isRequired, 
     label: React.PropTypes.string.isRequired, 
     onChange: React.PropTypes.func.isRequired, 
     placeholder: React.PropTypes.string, 
     value: React.PropTypes.string, 
     error: React.PropTypes.string 
    }, 
    render: function(){ 
     var wrapperClass = 'form-group'; 
     if(this.props.error && this.props.error.length > 0){ 
      wrapperClass += " " + 'has-error'; 
     } 
     return(

      <div className={wrapperClass}> 
       <label htmlFor={this.props.name}>{this.props.label}</label> 
       <div className="field"> 
        <input type="text" 
         name={this.props.name} 
         className="form-control" 

         ref={this.props.name} 
         value={this.props.value} 
         onChange={this.props.onChange} /> 
        <div className="input">{this.props.error}</div> 
       </div> 
      </div> 
     ) 
    } 
}); 

module.exports = Input; 

Answer 1

2つのエラーがあります。あなたは

が

setAuthorState: function(event){ 
    var field = event.target.name; 
    var value = event.target.value; 
    var author = Object.assign({},this.state.author); // Clone state.author 
    author[field] = value; 
    return this.setState({author: author}); 
} 

2º<input>名がstate.authorプロパティと一致する必要がありますする必要がありますsetAuthorState()

setAuthorState: function(event){ 
    var field = event.target.name; 
    var value = event.target.value; 
    this.state.author[field] = value; 
    return this.setState({author: this.state.author}); 
} 

に直接状態を変異さ1º

<Input 
     name="first Name" 
     label = "First Name" 
     onChange= {this.props.onChange} 
     value={this.props.author.firstName} 
/> 
<Input 
     name="last Name" 
     label = "Last Name" 
     onChange= {this.props.onChange} 
     value={this.props.author.lastName} 
/> 

はする必要があります

<Input 
     name="firstName" 
     label = "First Name" 
     onChange= {this.props.onChange} 
     value={this.props.author.firstName} 
/> 
<Input 
     name="lastName" 
     label = "Last Name" 
     onChange= {this.props.onChange} 
     value={this.props.author.lastName} 
/> 

jsfiddle