在输入字段中插入任​​何文本时，屏幕消失

Question

当我在输入字段中插入任​​何文本时，屏幕消失，我是UI的新手，正在学习ReactJs，请帮帮我。

import React from 'react';

    class InputChange extends React.Component{
        constructor(props){
            super(props)
            this.state={
                input:''
            }
      }

       updateState = (text) => {
        this.setState({input: text});
    }

      render(){

          return(
                <div>
                    <div>Input:{this.state.input}</div>
                    <div>
                    <input type="text" value={this.state.input} onChange={this.updateState} />
                    </div>
                </div>`
          );
      }
    }
    export default InputChange;

Answer 1

是event.target.value ...：

class InputChange extends React.Component {
  state = { input: '' };

  updateState = event => {
    this.setState({ input: event.target.value });
  };

  render() {
    return (
      <div>
        <div>Input:{this.state.input}</div>
        <div>
          <input
            type="text"
            value={this.state.input}
            onChange={this.updateState}
          />
        </div>
      </div>
    );
  }
}
export default InputChange;

文档中的更多信息：https://reactjs.org/docs/forms.html

Answer 2

这是您绑定更改事件操作的方式

 import React from 'react';

class InputChange extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            input: ''
        }

        this.updateState = this.updateState.bind(this);


    }

    updateState(e) {

        let text = e.target.value;

        this.setState({ input: text });
    }

    render() {

        return (
            <div>
                <div>Input:{this.state.input}</div>
                <div>
                    <input type="text" value={this.state.input} onChange={(e) => this.updateState(e)} />
                </div>
            </div>
        );
    }
}

export default InputChange;