Question

我正在尝试练习条件渲染。我有三个单独的地址组件，它们以三种不同的方式格式化。

在主要组件App.js中，我为所有地址字段保持状态，为格式保持状态。在表单的底部，我有一个select标签来选择三种格式之一。

我有两个问题，要更新所有字段，在我的handleChange中，我在setState中使用计算的属性名称，并在单击select标记以更改格式时使用单独的setState调用。

  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value })
    console.log(this.state)
   this.setState({format: e.target.value})

例如，输入信息后，将呈现我的组件，而zip是“”，格式为“ New York”。这是自动填充。分别输入每个字段，状态仍不完整。我知道setState是一个异步函数，在这种情况下，使用函数样式优于对象格式。如何在函数方法中使用计算出的属性名称和值？

codesandbox是Here

App.js，选择标签和按钮

 <select value={format} onChange={this.handleChange}>
      <option name="format1" value="format1">
        format1
      </option>
      <option name="format2" value="format2">
        format2
      </option>
      <option name="format3" value="format3">
        format3
      </option>
    </select>
    <button
      variant="contained"
      color="primary"
      onClick={this.handleSubmit}
    >
      Submit
    </button>
      </form>
    </div>

    <div>
      <AddressComponent
        name={name}
        street1={street1}
        street2={street2}
        city={city}
        state={state}
        zip={zip}
        format={format}
      >
        {this.props.children}
      </AddressComponent>
    </div>

AddressComponent

const AddressComponent = props => {
  return (
    <div>
      {(() => {
        switch (true) {
          case props.format === "format1":
            return <AddressFormat1 {...props} />;
          case props.format === "format2":
            return <AddressFormat2 {...props} />;
          case props.format === "format3":
            return <AddressFormat3 {...props} />;
          default:
            return <AddressFormat1 {...props} />;
        }
      })()}
    </div>
  );
};

如何使用select标签有条件地渲染三个组件之一？

0 个答案: