ReactJS:输入不可编辑
ReactJS: input is not editable
我正在创建一个研究 "Laravel-ReactJS" 应用程序,其中的组件中有一个表单。问题是无论我做什么,状态都没有得到更新。
然而,我已经在独立的 React 应用程序中尝试了相同的代码(没有 laravel)并且代码没有任何问题。
这是我的代码:
constructor()
{
super();
this.state = {
title: ''
};
}
onSetTitle(event)
{
console.log(event.target.title);
this.setState({
title: event.target.title
});
console.log(this.state.title);
}
render (
return (
<div className="col-lg-12 col-md-6 col-sm-6 form-group">
<label>Name<em>*</em></label>
<input
type="text"
name="title"
id="title"
className="form-control"
onChange={this.onSetTitle.bind(this)}
value={this.state.title}
/>
</div>
)
)
请告诉我我做错了什么。
我正在关注这个 youtube 教程 https://youtu.be/aDpoKnBlCCM
如果您想获取 合成事件 的 value
,您应该通过 event.target.value
访问它
event.target.title 永远是 undefined
这就是您输入的值未更新的原因。
你应该这样做:
onSetTitle(event)
{
this.setState({
title: event.target.value
});
}
————————————
输入的值将出现在 event.target
的 value
属性 中,而不是 title
。
onSetTitle(event) {
this.setState({
title: event.target.value
});
}
class App extends React.Component {
constructor() {
super();
this.state = {
title: ""
};
}
onSetTitle(event) {
this.setState({
title: event.target.value
});
}
render() {
return (
<div className="col-lg-12 col-md-6 col-sm-6 form-group">
<label>
Name<em>*</em>
</label>
<input
type="text"
name="title"
id="title"
className="form-control"
onChange={this.onSetTitle.bind(this)}
value={this.state.title}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
我正在创建一个研究 "Laravel-ReactJS" 应用程序,其中的组件中有一个表单。问题是无论我做什么,状态都没有得到更新。
然而,我已经在独立的 React 应用程序中尝试了相同的代码(没有 laravel)并且代码没有任何问题。
这是我的代码:
constructor()
{
super();
this.state = {
title: ''
};
}
onSetTitle(event)
{
console.log(event.target.title);
this.setState({
title: event.target.title
});
console.log(this.state.title);
}
render (
return (
<div className="col-lg-12 col-md-6 col-sm-6 form-group">
<label>Name<em>*</em></label>
<input
type="text"
name="title"
id="title"
className="form-control"
onChange={this.onSetTitle.bind(this)}
value={this.state.title}
/>
</div>
)
)
请告诉我我做错了什么。
我正在关注这个 youtube 教程 https://youtu.be/aDpoKnBlCCM
如果您想获取 合成事件 的 value
,您应该通过 event.target.value
event.target.title 永远是 undefined
这就是您输入的值未更新的原因。
你应该这样做:
onSetTitle(event)
{
this.setState({
title: event.target.value
});
}
————————————
输入的值将出现在 event.target
的 value
属性 中,而不是 title
。
onSetTitle(event) {
this.setState({
title: event.target.value
});
}
class App extends React.Component {
constructor() {
super();
this.state = {
title: ""
};
}
onSetTitle(event) {
this.setState({
title: event.target.value
});
}
render() {
return (
<div className="col-lg-12 col-md-6 col-sm-6 form-group">
<label>
Name<em>*</em>
</label>
<input
type="text"
name="title"
id="title"
className="form-control"
onChange={this.onSetTitle.bind(this)}
value={this.state.title}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>