Question

跟进这个问题，但应该有一个单独的帖子Trying to convert React.CreateClass to extends React.Component。

我想知道如何使用=＆gt;在调用组件但没有传递确切的输入名称时，组件应该在内部填充：

组件：

var FormFields = React.createClass({
    render: function() {
        const upwd = this.props.unamepwd;
        return(
        <form>
            Username: <input value={upwd.username} 
              onChange={this.props.handleChange('username')} /><br />
            Password: <input type="password" value={upwd.password} 
              onChange={this.props.handleChange('password')} />
          <button onClick={this.props.updateChanges}>Go!</button>
        </form>
        );
    }
});

在父渲染方法中，我想称它为：

<FormFields unamepwd={this.state} 
    handleChange={() => self.handleChange()} updateChanges={self.updateToServer} />

以下内容适用于username字段：

<FormFields unamepwd={this.state} 
  handleChange={() => self.handleChange('username')} updateChanges={self.updateToServer} />

Answer 1

只需将参数传递给函数。

<FormFields unamepwd={this.state} 
    handleChange={(fieldName) => self.handleChange(fieldName)} updateChanges={self.updateToServer} />

并称之为：

this.props.handleChange('password')

Answer 2

您可以在函数处理onChange事件中使用e.target来获取对触发事件的输入的引用。因此，您只能传递handleChange函数arround的引用，不需要{x => handleChange('name') }或{ handleChange.bind('name') }或其他任何内容。

var FormFields = React.createClass({
    render: function() {
        const upwd = this.props.unamepwd;
        return(
            <form>
              Username: <input value={upwd.username} 
                               onChange={this.props.handleChange} name="username" /><br />
              Password: <input type="password" value={upwd.password} 
                               onChange={this.props.handleChange} name="password" />
              <button onClick={this.props.updateChanges}>Go!</button>
            </form>
        );
    }
});

var Parent = React.createClass({
    handleChange(e){
        console.log( e.target.name );
    },
    render(){
        return <FormFields handleChange={ this.handleChange }  />
    }
});

http://jsfiddle.net/mg5cbepk/

React.js传递=＆gt;在道具

组件：

2 个答案: