输入文本子组件在键入从父组件传递 onChange 函数时不显示任何文本答案

【问题标题】：Input text child component does not show any text while typing passing onChange function from parent component输入文本子组件在键入从父组件传递 onChange 函数时不显示任何文本
【发布时间】：2016-07-20 10:04:25
【问题描述】：

我有控制器组件“ManageAuthorPage”，它将道具“setAuthorState”传递给“AuthorForm”（此道具功能负责更新输入状态，以便呈现子组件）。

“AuthorForm”负责显示具有附加输入组件“Input”的表单，其中“setAuthorState”道具再次作为道具传递。

现在在输入组件中输入不会在输入字段中显示任何文本。

它确认“setAuthorState”被触发，但检查状态值表明它只更新一个按下的键，并在下一次击键时覆盖另一个键。但这不会在文本字段中显示任何文本。

这是我的三个文件的内容：

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

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

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你有两个错误。

1º 你在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});
}

应该是

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> name 应该与 state.author 属性匹配

<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

【讨论】：