Question

我有一个输入字段，用户输入一个名称，然后我希望在导航栏上始终显示该名称。输入名称后，用户按下一个按钮，通过react-router-dom将其带到新屏幕，如此

<Link to="/events"> <button type="submit" className="btn btn-primary">Sign in</button> </Link>

这就是我现在所拥有的

在我的组件中输入字段

      constructor(props) {
        super(props);

        this.state = {value: ''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
        console.log(this.state);
      }

      handleSubmit(event) {
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
      }

    render() {
        return (
          <form onSubmit={this.handleSubmit}>
          <input
            type="email"
            className="form-control"
            id="inputEmail3"
            placeholder="Enter your username"
            onChange={this.handleChange}/>
        )
    }
}

我删除了与特定输入字段无关的任何内容，这就是为什么return语句看起来像它的方式。

根据我现在的情况，我将输入字段值作为状态，但我不确定如何在另一个组件中获取该值。

然后我有一个Navbar组件，我有一个简单的<p className="">Username</p>，我想要显示名称。

有关如何实现这一目标的任何帮助？

将值从表单传递到React中的另一个组件

0 个答案: