Question

嗨，我是新手做出反应，我正在尝试创建一个组件，我们可以将事件名称（onclick，onChange等）作为道具传递。因此，组件也可以以事件方式进行自定义。有可能吗？

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

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

Answer 1

你想要达到类似的目的 -

一个问题是您必须仅将支持的事件传递给元素类型。例如，如果按钮 onClick以及按钮支持的其他事件。

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从父组件传递给Child的示例 - 通过在父组件中生成结果。

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

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

我们使用props ChildComponent传递ParentComponent的渲染方法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 3

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

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

＆＃13;

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"));

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

＆＃13;

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

3 个答案: