reactjs - 使用React 上的重定向器将数据从输入框传递到第二个页面

Question

我是 React 的新手，我正在尝试将数据（日期 - 'dd/mm/yyyy'）从主页上的输入框中传递到第二页。我很困惑我把我的链接放在哪里，我把什么信息放在重定向中（如果有的话）以及在页面上发送和接收它的语法。这是我到目前为止的代码。请问有人可以帮忙吗？：

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = { inputDate: '' };
    }
    myChangeHandler = (event) => {
        this.setState({inputDate: event.target.value});
    }


    render() {
        let dateEntered = this.state.inputDate



        return (
            <form>
                <h3 >Enter Date :
                    <input
                        type="text" className="input-text" placeholder={"DD/MM/YYYY"} onChange={this.myChangeHandler}
                    />
                </h3>
                <button className="button half-page-width-button button-blue1"><Link to={{
                    pathname: '/Page1',
                    state: [{dateEntered}]
                }}>Submit Date</Link>
                </button>
            </form>
        );
    }
}

再次感谢

标签： reactjsredirect

Answer 1

您可以利用状态将数据传递给链接组件，并从/Page1路径呈现的组件中的位置接收它

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = { inputDate: '' };
    }
    myChangeHandler = (event) => {
        this.setState({inputDate: event.target.value});
    }


    render() {
        let dateEntered = this.state.inputDate



        return (
            <form>
                <h3 >Enter Date :
                    <input
                        type="text" className="input-text" placeholder={"DD/MM/YYYY"} onChange={this.myChangeHandler}
                    />
                </h3>
                <button className="button half-page-width-button button-blue1"><Link to={{
                    pathname: '/Page1',
                    state: {dateEntered}
                }}>Submit Date</Link>
                </button>
            </form>
        );
    }
}

---

在接收组件中

class Page1 extends Component {

   render() { // Table Data

       const { dateEntered } = this.props.location.state || {};
       return (
           <form>
               <h3 >Enter Date :
                   <input
                       type="text" className="input-text" value={this.state.header} 
                   />
               </h3>
           </form>
       );
   }
}

export default Page1;