Question

我有控制器组件＆＃34; ManageAuthorPage＆＃34;通过道具＆＃34; setAuthorState＆＃34; to＆＃34; AuthorForm＆＃34; （此prop函数负责更新输入状态，以便它将呈现子组件）。

＆＃34; AuthorForm＆＃34;负责显示具有附加输入组件的表单＆＃34;输入＆＃34;其中＆＃34; setAuthorState＆＃34;道具再次作为道具传递。

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

它确认＆＃34; setAuthorState＆＃34;触发但是检查状态值表明它只更新了按下的一个键，并在下一个键击中覆盖了另一个键。但这并未显示文本字段中的任何文本。

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

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属性匹配

<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

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

1 个答案: