我无法弄清楚为什么警报没有显示 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;

如果我在框中放置另一个变量，但如果它有正确的变量，它会弹出“未定义”的警报，它什么都没有弹出，而不是应该在表单中反映的内容。

目的是将数据添加到firestore中。

Answer 1

你拼错了 value 并且 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。不是 this.state.newsChange。

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