持久复选框位置

Question

我想在刷新页面时保持复选框的位置，如下图所示。

Here's the UI

下面是我的代码：

    <div className='checkboxTransaction ml-2'>
      <input
        id='radio1'
        name='radio'
        type='radio'
        defaultChecked={true}
        value='waiting'
       />
      <label htmlFor='radio1'>Menunggu Pembayaran</label>
    </div>
    <div className='checkboxTransaction ml-2'>
      <input
        id='radio2'
        name='radio'
        type='radio'
        value='waiting'
       />
      <label htmlFor='radio1'>Pesanan Dikirm</label>
    </div>  

Answer 1

如果我理解正确的话，您希望单选按钮的状态即使在刷新之后也保持不变。为此，需要将单选按钮的状态存储在localStorage中，并且在渲染时使用保存的数据正确设置defaultChecked。

下面是代码的一个小草图，它可能会向你展示我的意思。

​

const fakeLocalStorage = {};

class TestComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      testValue: fakeLocalStorage.test || 1
    };
  }
  
  onRadioChange = ({ target: { value } }) => {
    this.setState({ testValue: value }, () => {
      fakeLocalStorage.test = value;
      
      console.log(fakeLocalStorage);
    });
  }
  
  renderInput(val) {
    return <input type='radio' name="test" onChange={this.onRadioChange} value={val} defaultChecked={this.state.testValue === val}  />;
  }
  
  render() {
    return (<div>
      <label for="test">Test</label>
      {this.renderInput(1)}
      {this.renderInput(2)}
      {this.renderInput(3)}
    </div>);
  }
}

ReactDOM.render(<TestComponent />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

​