React.js 在 props 中传递 =>

IT技术 javascript reactjs ecmascript-6
2021-05-22 14:04:15

跟进这个问题，但值得一个单独的线程尝试将 React.CreateClass 转换为扩展 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} />
2个回答

只需向函数传递一个参数即可。

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

并称之为：

this.props.handleChange('password')

您可以e.target在处理 onChange 事件的函数中使用以获取对触发事件的输入的引用。所以你只传递对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 Typescript 中访问 c​​hild.type.name 下一篇使用 useState 挂钩将元素推送到数组