使用onChange事件传递其他参数

Question

我正在做的事情:

我试图将子组件中的字符串传递给父组件的handleChange函数.

目前的工作原理:

我有一个父React JS类,使用以下方法:

handleChange(event) {

    console.log(event.target.value);
}

在渲染功能中,我有以下内容:

<Child handleChange={this.handleChange.bind(this)} />

在Child课程中,我有:

<fieldset onChange={this.props.handleChange}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

这很好用.

我想做的是:

我试图section在handleChange函数中添加一个参数,如下所示:

handleChange(section, event) {
    console.log(section);
    console.log(event.target.value);
}

在Child课程中,我有:

<fieldset onChange={this.props.handleChange("tags")}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

我现在得到错误:

Uncaught TypeError: Cannot read property 'target' of undefined

我的第二个console.log语句中抛出了此错误.

我究竟做错了什么？

另外,我正在考虑使section参数可选.如果是这样,有没有一种简单的方法可以做到这一点？如果事件参数需要最后,似乎可能无法实现.

Answer 1

当你写这篇文章时:

<fieldset onChange={this.props.handleChange("tags")}>

handleChange 一旦触发渲染,将立即调用.

相反,这样做:

<fieldset onChange={(e) => this.props.handleChange("tags", e)}>

现在handleChange调用onChange处理程序时将调用它.

Answer 2

const handleChange = (tags) => (event) => {
// console.log(tags);
// console.log(event.target.value);
};

<input
      type="text"
      name="name"
      placeholder="Name"
      value={input.Iname}
      onChange={handleChange("Iname")}
    />

Answer 3

在您的handle事件中使用双箭头功能，使用箭头功能时无需绑定：

handleChange = tags => (event) => {
    console.log(tags);
    console.log(event.target.value);
}

在孩子中：

<fieldset onChange={this.props.handleChange("tags")}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

Answer 4

没有在每个 render() 上定义匿名函数：

这里的大多数答案都推荐在 render() 中定义的匿名函数，正如 Davidicus 指出的那样，不推荐使用：https : //medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-渲染是有问题的-f1c08b060e36

François 的回答避免了这个问题，但正如 Vael Victus 指出的那样，这需要transform-class-properties.

但是，他所做的只是定义一个定义函数的函数，否则您可以这样做：

constructor(props) {
  super(props);
  this.handleChange = (yourSpecialParam) => (event) => this.handleChange(yourSpecialParam).bind(this)
}

render() {
  return <button onClick={this.handleChange(1234)} >Click Me</button>
}

Answer 5

作为 OP，我最初发布了这个作为对我的问题的跟进，但它被删除了，我被告知将其发布为答案，所以这里是：

根据 Ritesh Bansal 的回答，我了解到以下内容：

以下行不起作用，因为在函数名称后使用括号时，会立即调用该函数，而不是等待发生更改：

<fieldset onChange={this.props.handleChange("tags")}>

上面的方法是行不通的，这样的函数也行不通：

<fieldset onChange={this.props.handleChange()}>

上面的代码也会在第一次渲染时立即被调用。

对此有两种解决方案：

不太好的方法：

<fieldset onChange={this.props.handleChange.bind(this, "tags")}>

更好的方法：

<fieldset onChange={(evt) => this.props.handleChange("tags", evt)}>

现在问题解决了。谢谢大家！

更新：

我还研究了 Shubham Khatri 的建议，将子元素更改为：

<Child handleChange={(e,val) => this.handleChange(e, val)}/>

我没有意识到bind在渲染函数中使用，每次调用渲染时都会创建一个新的函数实例。因此，我可以使用 Shubham Khatri 的方法，或者在构造函数中绑定方法。