我们可以在反应中将事件名称作为道具传递吗？

Question

您好，我是新手，我正在尝试创建一个组件，我们可以在其中将事件名称（onclick、onChange 等）作为道具传递。所以组件也可以以事件的方式进行定制。有可能吗？

<Input  {this.props.eventName} = {this.props.name} />

这是我想做的。有可能吗？

Answer 1

你想实现类似的东西吗-

一个问题是您必须只将受支持的事件传递给元素类型。 例如 button onClick 和 button 支持的其他事件。

class Parent extends React.Component {
  
  render() {
    return(
       <ChildComponent
        evtName = 'onClick' 
        evtHandler={ () => { console.log("event called!");}}
       />
    )
  }
}

class ChildComponent extends React.Component {
  render() {
     return React.createElement(
        'button',
        { [this.props.evtName] : this.props.evtHandler },
        'Click me'
      );  }
}


ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<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="root"></div>

Answer 2

如果我理解正确，只需将 event 传递给 handler 作为道具。我没有看到仅考虑事件名称的用例。

请参阅下面的示例，使用不同的事件重用相同的元素。

class Input extends React.Component {
  render(){
    const {} = this.props;
    return (
      <input {...this.props} />
    );
  }
}

class Test extends React.Component {
  render(){
    return (
      <div>
        <Input name="onClick" onClick={(e) => console.log(e.target.name)}/>
        <Input name="onChange" onChange={(e) => console.log(e.target.name)}/>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

<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="root"></div>

Answer 3

以下是如何将 event 从父组件传递给子组件的示例 - 通过在父组件中生成结果。

class Parent extends Component {
  //constructor, other methods, etc...

  // We call our event update
  update(stuff) {
    console.log(stuff);
  }
}

我们在 ParentComponent 的渲染方法中传递了一个 ChildComponent 和 props onClick（你可以随意命名）。

<ChildComponent
  onClick={this.update.bind(this)}
/>

现在，子组件。要访问我们的道具onClick，我们只需使用this.props.onClick。我们的参数只是hello，您可以传递任意数量的参数。

<button onClick={ (e) => this.props.onClick('hello') }>
  Action
</button>

这是工作示例：

class Parent extends React.Component {
  
  update(stuff) {
    console.log(e, stuff);
  }
  
  render() {
    return(
       <ChildComponent
        onClick={this.update.bind(this)} />
    )
  }
}

class ChildComponent extends React.Component {

  render() {
    return(
      <div>
      <button onClick={ (e) => this.props.onClick('hello') }> Action</button>
      </div> 
    )
  }
}


ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<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="root"></div>