如何在 React JS 中转到另一个页面之前保存以前的状态/页面数据

Question

this.state = {
            name: '',
            color: '',
            description: '',
            beacons: []
        };
        
         handleColors = (item) => {
          this.setState({
              color: item.value
          });

      };

    handleBeaconChange = (beacons) => {
          this.setState({
              beacons
          });
          
      };

    handleInputChange(event) {

        this.setState({
            [event.target.name]: event.target.value
        });

    }
    
    <div className="mb-1  margin-input">
                    <span className=" form-font div-width">NAME<span className="font-css top">*</span></span>
                      <input type="text"
                       className="form-control margin-select" 
                       placeholder="Name"
                       value={this.state.name}
                        name="name" 
                        onChange={this.handleInputChange}
                       />
                    </div>

                    <div className="mb-1">
                         <span className=" form-font div-width">
                            COLOR</span>
                        <Select
                          className="margin-select"
                          value={this.state.color}
                          options={colorValues}
                          onChange={this.handleColors}/>
                    </div>

                    <div className="mb-1  margin-input">
                    <span className=" form-font div-width">DESCRIPTION</span>
                      <textarea 
                      className="form-control margin-select" 
                      placeholder="Description"
                      value={this.state.description}
                        name="description" 
                        onChange={this.handleInputChange}
                      />
                    </div>

                    <h3 className="">{this.props.label}</h3>

                    <div className="mb-1">
                         <span className=" form-font div-width">
                            BEACON (s)</span>
                        <Select.Async 
                          multi={true} 
                          className="margin-select"
                          value={this.state.beacons}
                          loadOptions={getBeacons}
                          onChange={this.handleBeaconChange}/>

                          <div className="panel-body">
                        <a href={'/new-beacon'} className="pull-right">Add Beacon</a>
                      </div>

                    </div>

这是图片。 现在我只想在转到另一个页面之前保存以前的表单数据 例如，在这张图片中，我在字段中输入了名称和颜色值，当我单击“添加信标链接”时，它会将我路由到另一个表单，但是当我返回时，我在此表单中输入的值丢失了它。 有什么解决方案吗？

Answer 1

您可以使用 Redux 来实现相同的目的。您需要做的是将表单状态保存在 redux 存储中，而不是组件 localState 本身

你的减速器看起来像

const initialState = {
      name: '',
            color: '',
            description: '',
            beacons: []
}
const BeaconForm = (state = initialState, action) => {
      switch(action.type) {
          case 'UPDATE_BEACON_FORM_VALUE': 
               return {
                    ...state, [action.newVal.key]: action.newVal.value
               }
          default: return state
      }
}

export default BeaconForm

然后有一个动作

export function updataFormValue(updatedVal) {
       return { type: 'UPDATE_BEACON_FORM_VALUE', newVal: updatedVal}
}

在组件中

handleInputChange(event) {

    var data = {[event.target.name]: event.target.value}
    this.props.updataFormValue(data);

}

除此之外，您还需要使您的组件Redux 与connect, mapStateToProps , etc 兼容，我假设您已经知道了

然后不是从 state 设置输入值，而是从你从 redux store 获得的 props 设置它