React.js passing =>在道具上 [英] React.js passing => in props

问题描述

跟进这个问题，但值得一个单独的线程尝试将React.CreateClass转换为扩展React.Component 。

Follow up on this question but deserved a separate thread Trying to convert React.CreateClass to extends React.Component.

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

I'm wondering how I can make use of => while calling the component but without passing in the exact input name, that should get filled up by the component internally:

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>
        );
    }
});

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

While in the parent render method I would like to call it something like:

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

以下内容将正常工作，但仅适用于用户名 field：

The following would work but only for the username field:

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

推荐答案

只需将参数传递给函数。 >

Just pass an argument to the function.

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

并调用如下：

this.props.handleChange('password') 

这篇关于React.js passing =>在道具上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！