javascript - React.js 传递 => Prop

Question

跟进这个问题，但值得一个单独的线程 Trying to convert React.CreateClass to extends React.Component .

我想知道如何在调用组件时使用 => 但不传递确切的输入名称，它应该由组件内部填充:

组件:

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')