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

Question

我有 Controller 组件“ManageAuthorPage”，它将 Prop “setAuthorState”传递给“AuthorForm”(此 Prop 函数负责更新输入状态，以便渲染子组件)。

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

Answer 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> 名称应与 state.author 匹配属性(property)

<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