我不明白为什么警报没有显示this.state.word字符串

Question

class LoginPage extends React.Component {
constructor(props) {
super(props);
this.state = {
word: '',
isSignedIn: false
}
}
..........................................
newsChange = (event) => {
this.setState({
word: event.target.value
})
}

submit = (event) => {
alert(`this ${this.state.word}`)
// db.collection("news").add({
// Mnews: this.state.word})}
}
render() {
if (!this.state.isSignedIn) {
return (
<div>
<h1>unsure if google link works</h1>
<p>Please sign-in:</p>
<StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()} />
</div>
);
}
return (
<div>
<h1>HI</h1>
<p>Welcome {firebase.auth().currentUser.displayName}! You are now signed-in!</p>

<a onClick={() => firebase.auth().signOut()}>Sign-out</a>
<br />
<br />
<br />
<br />
<form onSubmit={this.submit}>
<label >Latest news (text only)</label>
<hr />
<input type="text"
vlaue={this.state.word}
onChange={this.state.newsChange} />
<button type="submit"> Submit </button>

</form>
</div>
);
}
}
export default LoginPage;

如果我在框中放置另一个变量，则警报将弹出"未定义"，但如果它有正确的变量，则它将不显示任何内容，而不是应该反映在表单中的内容。

目的是将数据添加到消防仓库中。

Answer 1

您拼写了错误的值，onChange不应该来自this.state.newsChange，而是来自this.newsChange，如果您不希望提交表单，则应防止默认值。

class LoginPage extends React.Component {
state = {
word: '',
isSignedIn: false
}
newsChange = event => {
this.setState({
word: event.target.value
})
}
submit = event => {
event.preventDefault()
console.log(`this ${this.state.word}`)
}
render() {
return (
<div>
<form onSubmit={this.submit}>
<input
type="text"
value={this.state.word}
onChange={this.newsChange}
/>
<button type="submit"> Submit </button>
</form>
</div>
)
}
}
//render app
ReactDOM.render(<LoginPage />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

您的输入vlaue中有一个拼写错误，您还需要调用此newsChange。不是这个。state.newsChange。

<input type="text" 
value= {this.state.word}
onChange={this.newsChange}/>