Question

我刚开始进入React的世界，到目前为止我喜欢它。我终于开始掌握基础知识并尝试创建一个简单的程序。此程序只需在文本框中输入您输入的内容，并将其显示在标题标记中。我似乎无法弄清楚为什么这不起作用。我将文本显示在控制台中，但无法弄清楚为什么它不会显示在我的标记中。提前感谢您的帮助。任何提示都非常感谢。

class Header extends Component{
    render(){
        return(
            <div className = "header">
                <h1>Enter Your Name</h1>
            </div>
        )
    }
}

class Input extends Component{
    render(){
        return(
            <div className = "input_container">
                <input onChange = {this.props.onChange} className = "input_field" type = "text" placeholder = "Name..."></input>
            </div>
        )
    }
}

class App extends Component {
    state = {
        inputValue : ""
    }

    onChange = (e) => {
        console.log(e.target.value)
        this.setState = ({inputValue: e.target.value});
    }

    render(){
        return(
            <div>
            <Columns />
            <Input
                onChange = {this.onChange}/>
            <h2>{this.state.inputValue}</h2>
        </div>
        )
    }
}

Answer 1

您的setState语法不正确。它是一个功能而不是一个对象

this.setState ({ inputValue: e.target.value });

您的代码将是

class App extends Component {
  state = {
    inputValue: ""
  };

  onChange = e => {
    console.log(e.target.value);
    this.setState({ inputValue: e.target.value });
  };

  render() {
    return (
      <div>
        <Input onChange={this.onChange} />
        <h2>{this.state.inputValue}</h2>
      </div>
    );
  }
}

在输入标记

1 个答案: