我们可以将事件名称作为道具传递给反应吗?
Can we pass event name as props in react?
嗨,我是 React 新手,我正在尝试创建一个组件,我们可以在其中传递事件名称(onclick、onChange 等)作为道具。因此组件也可以以事件的方式进行定制。可能吗?
<Input {this.props.eventName} = {this.props.name} />
这是我想做的。可能吗?
这里是如何将 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>
如果我没理解错的话,只需传递 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>
你想实现类似的东西吗-
一个问题是您必须只将支持的事件传递给元素类型。
例如 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>
嗨,我是 React 新手,我正在尝试创建一个组件,我们可以在其中传递事件名称(onclick、onChange 等)作为道具。因此组件也可以以事件的方式进行定制。可能吗?
<Input {this.props.eventName} = {this.props.name} />
这是我想做的。可能吗?
这里是如何将 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>
如果我没理解错的话,只需传递 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>
你想实现类似的东西吗-
一个问题是您必须只将支持的事件传递给元素类型。
例如 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>