Question

我在React工作，在阅读this article时，我决定按照他们的建议在我的构造函数中切换事件处理程序的合并绑定。问题是，当我这样做时，我失去了将表单变量传递给onChange Material-UI Checkbox功能的能力。这是我的相关代码

的客户机/前景/ ProspectForm.jsx

class ProspectForm extends React.Component {
  constructor(props) {
    super(props)
    // Bind Methods
    this.handleChangeProductType = this.handleChangeProductType.bind(this)

    this.state = {
    inquiryDate: moment().toDate(),
    productTypes: {list: [], other: '', },
    otherChecked: false,
    }
  }

  handleChangeProductType(a){
    console.log(a)
  }

  render() {
    return(
      <div className="field">
        { this.props.allProductTypes.map((referralSource, k) =>
        <Checkbox
          checked={this.checkProductType(referralSource)}
          onCheck={this.handleChangeProductType(referralSource)}
          label={referralSource}
          key={k} />
        )}
      </div>
    )
  }
}

export default createContainer(() => {

    const productTypes = [
      "Independent Living",
      "Memory Care",
      "Beauty Shop",
      "Skilled Nursing",
      "Therapy Rental",
    ]

  return {
    productTypes: productTypes,
  }
}, ProspectForm)

基本上，当我用类似

的参数调用onChange时

this.handleChangeProductType(referralSource)

它实际上并没有调用该方法。当我这样称呼它时

onChange={this.handleChangeProductType}

它确实调用了该方法，但我无法访问函数中的referralSource，我需要设置状态对象，以便我可以跟踪哪些被检查并将它们与我的表单一起发送。那么我该如何设置在构造函数中使用bind方法，并将我的参数传递给方法呢？提前致谢

Answer 1

不要担心构造函数中的bind。相反，您可以在onCheck声明中绑定它，并将referralSource参数传递给bind。

onCheck={this.handleChangeProductType.bind(null, referralSource)}

Answer 2

你可以这样写：

onCheck={(referralSource) => this.handleChangeProductType(referralSource)}

Answer 3

您还可以为<Checkbox />创建一个包装器组件，为您创建适当的“加载”功能。

const ProductTypeCheckbox = ({
  referralSource,
  checkProductType,
  handleChangeProductType,
}) => {
  const isChecked = () => checkProductType(referralSource);
  const handleCheck = () => handleChangeProductType(referralSource);

  return (
    <Checkbox
      checked = { isChecked() }
      onCheck = { () => handleCheck() }
      label = { referralSource }
    />
  );
};

然后只需使用

替换上面列表中的<Checkbox />即可

<ProductTypeCheckbox
  key = { k }
  referralSource = { referralSource }
  checkProductType = { checkProductType }
  handleChangeProductType = { handleChangeProductType }
/>

这会产生一些开销，为循环中的每个项目创建一个新功能，但它是一个干净的分离哑和智能组件，并允许您轻松读取所设置的内容。

构造函数中的React绑定方法 - 如何传入Argument

3 个答案: