这段代码适用于Codepen:见 https://codepen.io/pkshreeman/pen/YQNPKB?editors=0010 但是,我正在尝试在我自己的"创建-反应-应用程序"中使用它,并且"无限制全局"的错误被event.target.id
触发。 对此的解决方法是什么。 除了使用事件目标之外,您如何从反应中的"this"中获取 id?
const Elem = (props) =>{
return (<div>
<h1 onClick={props.clickon} id="GM"> Good Morning!
<br/>
{props.name} {props.last}
<br />
This is phase three</h1>
<button id="btn1" onClick={props.clickon}> {props.text} </button>
<button id="btn2" onClick={props.clickon}> Second Button </button>
</div>
);
};
class App extends React.Component{
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
var clickedId = event.target.id;
console.log(clickedId);
alert("It works! You clicked " + clickedId)
}
render(){
return (
<Elem name = 'paul' last='shreeman' clickon={this.handleClick} text='PushMe'/>
)
}
}
ReactDOM.render(
<App />, document.getElementById('root'))
奇怪的是,
这甚至可以在代码笔中使用 - 看起来您正在使用全局event
属性。
执行此操作的正确方法是从 handleClick
函数的第一个参数中获取事件对象:
handleClick(event) {
var clickedId = event.target.id;
console.log(clickedId);
alert("It works! You clicked " + clickedId)
}
我猜您可能需要在传递函数上指定事件。
const Elem = (props) =>{
return (<div>
<h1 onClick={props.clickon} id="GM"> Good Morning!
<br/>
{props.name} {props.last}
<br />
This is phase three</h1>
<button id="btn1" onClick={props.clickon}> {props.text} </button>
<button id="btn2" onClick={props.clickon}> Second Button </button>
</div>
);
};
class App extends React.Component{
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(event){
var clickedId = event.target.id;
console.log(clickedId);
alert("It works! You clicked " + clickedId)
}
render(){
return (
<Elem name = 'paul' last='shreeman' clickon={(event)=>this.handleClick(event)} text='PushMe'/>
)
}
}
ReactDOM.render(
<App />, document.getElementById('root'))
如果它适合您,请尝试此操作。
将事件作为方法中的参数传递 下面是一个示例:
onChangeHandaler = (event)=>{
var inputName = event.target.name;
var inputValue = event.target.value;
this.setState({[inputName]:[inputValue]})
}