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>

这很好用。

我想做的是：

我正在尝试向handleChange函数添加section参数，如下所示：

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

当你写这篇文章时：

<public function insert(Request $r){

foreach($r->get('subject') AS $k=>$v){

 DB::table('subject')->insert([

'subject'=>$r->get('subject')[$k]

 ]);
}
}

一旦触发渲染，

<fieldset onChange={this.props.handleChange("tags")}>将立即被调用。

相反，这样做：

handleChange

现在调用<fieldset onChange={(e) => this.props.handleChange("tags", e)}>处理程序时将调用handleChange。

Answer 2

在您的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 3

作为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)}/>

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

Answer 4

在每个render（）上均未定义匿名函数：

这里的大多数答案都建议在render（）中定义一个匿名函数，正如Davidicus所指出的那样，不建议这样做：https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36

弗朗索瓦的回答避免了这个问题，但是正如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

你可以这样做：

<fieldset onChange={(e) => this.props.handleChange("tags", e)}>
    <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 6

为了将子组件中的参数传递给父组件，您可以为箭头函数设置参数。

handleChange(event, section) {
    console.log(section);
    console.log(event.target.value);
}
<Child handleChange={(e, val) => this.handleChange(e, val)} />

<fieldset onChange={(e) => this.props.handleChange(e, "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>

示例代码段

＆＃13;

class App extends React.Component {
  handleChange(e, val) {
    console.log(e.target.value, val);
  }
  render() {
    return(
      <Child handleChange={(e,val) => this.handleChange(e, val)}/>
    )
  }
}

class Child extends React.Component {
  
  render() {
    return(
      <input type="text" onChange={(e) => this.props.handleChange(e, 'tab')}/>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

Answer 7

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")}
    />

使用onChange事件传递其他参数

7 个答案: