Question

我已经使用React几个月了，我发现最困难的事情之一是如何正确绑定带参数的函数。

目前，我有三个共享单个更新功能的输入，但需要传递不同的第一个参数。这是我的组成部分：

class MyComponent extends Component {
  render() {
    const { onChange } = this.props;
    return(
      <div className='my_component'>
        <Row>
          <Column>
            <Input 
              value={item1} 
              onChange={ (newValue) => onChange('item1', newValue) } />
          </Column>
        </Row>
        <Row>
          <Column>
            <Input 
              value={item2} 
              onChange={ (newValue) => onChange('item2', newValue) } />
          </Column>
        </Row>
        <Row>
          <Column>
            <Input 
              value={item3} 
              onChange={ (newValue) => onChange('item3', newValue) } />
          </Column>
        </Row>
      </div>
    );
  }
}

所以，目前，我在组件的渲染功能中使用了箭头函数。但是通过研究，我发现在重新渲染方面显然存在性能问题。

提供的解决方案是使用

在构造函数中绑定

constructor() {
  super();
  this.handleChange = this.handleChange.bind(this)
}

handleChange(event) {
  this.props.onChange('ARGUMENT REQUIRED!', event.target.value);
}

问题是，我不能让第一个参数起作用......我应该为每个创建一个函数并在构造函数中为每个函数绑定一个函数，如下所示：

constructor() {
  super();
  this.handleItem1Change= this.handleItem1Change.bind(this)
  this.handleItem2Change= this.handleItem2Change.bind(this)
  this.handleItem3Change= this.handleItem3Change.bind(this)
}

handleItem1Change(newValue) {
    this.props.onChange('item1', newValue);
}
handleItem2Change(event) {
    this.props.onChange('item2', newValue);
}
handleItem3Change(event) {
    this.props.onChange('item3', newValue);
}

这看似重复......是否有更简化的方法来做到这一点？

Answer 1

如果您可以控制Input组件，为什么不在name组件中使用Input组件作为支柱传递onChange组件。

在您处理更改的Input组件中，您可以这样做。

<Input 
 value={item3} 
 onChange={ onChange } 
 name='item3'

/>

// in the Input component
handleChange = (value) => {
  this.props.onChange(value, this.props.name)
}

然后您只需更新onChange即可将值放在第一位，将名称放在第二位。这样做的原因是为了确保这不会破坏您使用它的其他地方的Input组件，因为value仍然是第一个参数，name是次要的可选参数。

如果您将事件传回onChange而不是值，您仍然可以使用该事件，只要您将e.target.name道具应用于输入，就可以执行name在Input呈现的那些看起来像：

handleChange(event) {
  this.props.onChange(event.target.name, event.target.value);
}

Answer 2

您可以将要部分应用的参数传递给bind：

constructor() {
  super();
  this.handleItem1Change = this.props.onChange.bind(this, 'item1');
  this.handleItem2Change = this.props.onChange.bind(this, 'item2');
  this.handleItem3Change = this.props.onChange.bind(this, 'item3');
}

或者，你仍然可以在那里使用箭头功能：

constructor() {
  super();
  this.handleItem1Change = newValue => this.props.onChange('item1', newValue);
  this.handleItem2Change = newValue => this.props.onChange('item2', newValue);
  this.handleItem3Change = newValue => this.props.onChange('item3', newValue);
}

Answer 3

只需添加一个新的抽象层，类似于::

form.js //use the component RowInput
<RowInput name={'item1'} value={'item'} onChange={onChange} />

RowInput.js // stupid/dumb component
export const RowInput = (name, item, onChange)=>
          <Column>
            <Input 
              value={item} 
              onChange={ (val) => onChange(name) } />
          </Column>

Answer 4

你可以尝试这个来绑定on change call back

<Input value={item1} onChange={onChange.bind(null,'item1') } />

回调将如下所示

onChange(item, event)

如何正确绑定函数与组件中的参数？

4 个答案: