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

Question

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

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

这是我想做的。可能吗？

Answer 1

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

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

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

我们传入 ParentComponent 的 render 方法 a ChildComponent 和 props onClick（你可以随意命名）

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

现在，ChildComponent。要访问我们的道具 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>

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

你想实现类似的东西吗-

一个问题是您必须只将支持的事件传递给元素类型。例如 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>

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

Can we pass event name as props in react?

reactjs

ecmascript-6

react-dom