Ron*_*ith 2 javascript onchange reactjs
我只是在学习。将代码从ES5转换为ES6时，下拉菜单的'onChange'事件不起作用，我看不出问题出在哪里。我已经浏览过“可能有答案的问题”，但那里什么也没有。我的应用程序已编译，但控制台出现错误。我怀疑是Child.js的“选择”标记中的“ onChange”属性。我将不胜感激。这是我的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';
ReactDOM.render(
<Parent />,
document.getElementById('root')
);
import React from 'react';
import Child from './Child';
import Sibling from './Sibling';
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {name: 'Frarthur'};
this.changeName = this.changeName.bind(this);
}
changeName(newName) {
this.setState({name: newName});
}
render() {
return (
<div>
<Child onChange={this.changeName} />
<Sibling name={this.state.name} />
</div>
);
}
}
export default Parent;
import React from 'react';
class Child extends React.Component {
handleChange(e){
let name = e.target.value;
this.props.onChange(name);
}
render(){
return (
<div>
<select
id="great-names"
onChange={() => this.handleChange()}>
<option value="Frarthur">Frarthur</option>
<option value="Gromulus">Gromulus</option>
<option value="Thinkpiece">Thinkpiece</option>
</select>
</div>
);
}
}
export default Child;
import React from 'react';
class Sibling extends React.Component {
render(){
let name = this.props.name;
return (
<div>
<h1>Hey, my name is {name}!</h1>
<h2>Don't you think {name} is the prettiest name ever?</h2>
<h2>Sure am glad my parents picked {name}!</h2>
</div>
);
}
}
export default Sibling;
Uncaught TypeError: Cannot read property 'indexOf' of null
at content.js:4186
Child.js:6Uncaught TypeError: Cannot read property 'target' of undefined
at Child.handleChange (http://localhost:3000/static/js/bundle.js:32622:20)
at onChange (http://localhost:3000/static/js/bundle.js:32644:30)
at Object.executeOnChange (http://localhost:3000/static/js/bundle.js:24438:35)
at ReactDOMComponent._handleChange (http://localhost:3000/static/js/bundle.js:24795:39)
at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16910:17)
at executeDispatch (http://localhost:3000/static/js/bundle.js:16692:22)
at Object.executeDispatchesInOrder (http://localhost:3000/static/js/bundle.js:16715:6)
at executeDispatchesAndRelease (http://localhost:3000/static/js/bundle.js:16103:23)
at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/bundle.js:16114:11)
at Array.forEach (native)
Child.js:6Uncaught TypeError: Cannot read property 'target' of undefined
at Child.handleChange (http://localhost:3000/static/js/bundle.js:32622:20)
at onChange (http://localhost:3000/static/js/bundle.js:32644:30)
at Object.executeOnChange (http://localhost:3000/static/js/bundle.js:24438:35)
at ReactDOMComponent._handleChange (http://localhost:3000/static/js/bundle.js:24795:39)
at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16910:17)
at executeDispatch (http://localhost:3000/static/js/bundle.js:16692:22)
at Object.executeDispatchesInOrder (http://localhost:3000/static/js/bundle.js:16715:6)
at executeDispatchesAndRelease (http://localhost:3000/static/js/bundle.js:16103:23)
at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/bundle.js:16114:11)
at Array.forEach (native)
您忘记了传递eventto handleChange函数，请使用以下命令：
onChange={(e) => this.handleChange(e)}
或这个：
onChange={this.handleChange.bind(this)}
| 归档时间： |
|
| 查看次数： |
4424 次 |
| 最近记录： |