Question

所以我在Form.jsx中具有以下状态

this.state = {
      name: "",
      contact: "",
      company: "",
      mail: "",
      key: {
        val1: false,
        val2: false,
        val3: false
      },

我正在尝试使用复选框更新KEY即val1，val2中的值。单击复选框时，我想将其设置为true。我对如何设置特定值有些困惑。我正在使用setState更新值，但它仍然为false。我的代码看起来像这样。

handleKey(e) {
    let change = {};
    change[e.target.name] = e.target.value;
    console.log("value: " + e.target.value);
    let key = this.state.key;
    this.setState({
      wedding: e.target.value,
      MICE: e.target.value,
      corporate: e.target.value
    });
  }

这是我的表格：

<Form.Group controlId="formBasicChecbox">
            <Form.Label> Key </Form.Label>
            <Form.Check
              value={this.state.key.weeding}
              onChange={e => this.handleKey(e)}
              name="key"
              type="checkbox"
              label="Wedding"
            />
            <Form.Check
              value={this.state.key.MICE}
              onChange={e => this.handleKey(e)}
              name="key"
              type="checkbox"
              label="MICE"
            />
            <Form.Check
              value={this.state.key.corporate}
              onChange={e => this.handleKey(e)}
              name="key"
              type="checkbox"
              label="Corporate"
            />
          </Form.Group>

Answer 1

我想您会想要做类似的事情：

handleKey (e) {
  const {value, checked, name} = e.target;
  const previousKeyState = this.state[name] || {}; 
  this.setState({
    [name]: {...previousKeyState, [name]: checked}
  });
}

请参见下面的演示。

const fields = {
  wookies: ['chewie', 'chewbacca'],
  hats: ['fedora', 'cowboy', 'top']
};

class FormDemo extends React.Component {
  state = {}
  
  handleCheckbox = (e) => {
const {name, value, checked} = e.target;
const previousState = this.state[name] || {};
this.setState({
  [name]: {...previousState, [value]: checked}
});
  }

  render () {
return (
  <div>
    {Object.entries(fields).map(([name, options]) => {
      return (
        <fieldgroup key={name}>
          <div>{name}</div>
          {options.map(o => (
            <label key={o}>
              <input
                type="checkbox"
                onClick={this.handleCheckbox}
                name={name}
                value={o}
                checked={(this.state[name] || {})[o]}
              />
              {o}
            </label>
          ))}
        </fieldgroup>
      );        
    })
  }
    <pre>{JSON.stringify(this.state, null, 2)}</pre>
  </div>
);
  }
}

ReactDOM.render(<FormDemo />, document.getElementById('demo'));

label {
  display: block;
}

fieldgroup {
  display: block;
  margin-bottom: 1rem;
}

<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="demo"></div>

Answer 2

您正在将状态设置为当前呈现的值。由于当前值是最初呈现的内容，因此您始终将其设置为相同的false / unchecked状态。

因此，您想在更改事件发生时自己“切换”复选框布尔状态。

Answer 3

您应该在更改句柄时做到这一点，并且还要记住更改文本名称：

this.setState({
      ...this.state,key:{...this.state.key,[e.target.name]:e.target.value}
    });
  }

并更改您的复选框名称，否则它将更新ex的相同值：

<Form.Check
              value={this.state.key.corporate}
              onChange={e => this.handleKey(e)}
              name="key"
              type="checkbox"
              label="Corporate"
            />

应该是

<Form.Check
              value={this.state.key.corporate}
              onChange={e => this.handleKey(e)}
              name="Corporate" // name of checkbox you want to change(act as unique identifier)
              type="checkbox"
              label="Corporate"
            />

如何使用React形式的复选框更新状态下的JSON对象值？

3 个答案: