Javascript 基于所选复选框的渲染属性

我已经在CodeSandBox的评论中解释了这些问题。 基本上，我有一个使用复选框呈现的field.name数组。选择每个框后，用户应能够输入lengthType和size的单独值。到目前为止，相同的值将应用于选中的每个框

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fields: ["action", "callee", "caller", "duration", "message"],
      fieldNames: [],
      size: [],
      lengthType: []

    };
  }

  fieldNamesChanged = newFieldNames => {
    console.log(newFieldNames);
    this.setState({ fieldNames: newFieldNames });
  };

    onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
    console.log([e.target.name])
}

updateLengthType = (e) => {
    this.setState({ lengthType: e.target.value });
    console.log(this.state.lengthType)
}
  handleChange = event => {
    const schema = this.state.schemas.find(
      schema => schema.name === event.target.value
    );
    if (schema) {
      axios({
        method: "get",
        url: `${schema.selfUri}`,
        headers: { Accept: "  " }
      })
        .then(response => {
          console.log(response);
          this.setState({
            fields: response.data.data.fields,
            selectedId: response.data.data.id
          });
          console.log(this.state.selectedId);
          console.log(this.state.fields);
        })
        .catch(error => console.log(error.response));
    }
  };

来自api调用的字段数组响应示例，并将fields.name呈现为复选框值

  "fields": [
    {
        "name": "action",
        "dataType": "string",
    },
    {
        "name": "callee",
        "dataType": "string",
    },
    {
        "name": "caller",
        "dataType": "string",
    },
    {
        "name": "duration",
        "dataType": "double",
    },
    {
        "name": "message",
        "dataType": "string",
    },
]



  render() {
    const { fields, fieldNames } = this.state;

    return (
      <div className="App">
        <h1>Checkbox Group</h1>

        <div>
          <fieldset>
            <legend>Choose field names</legend>
            <br />
            <CheckboxGroup
              checkboxDepth={5}
              name="fieldNames"
              value={this.state.fieldNames}
              onChange={this.fieldNamesChanged}
            >
              {fields &&
                fields.map(field => {
                  return (
                    <label>
                      <Checkbox value={field} />
                      {field}
                    </label>
                  );
                })}
              <br />
            </CheckboxGroup>

            <label>Length Type:</label>
            <select
              value={this.state.lengthType}
              onChange={this.updateLengthType}
              required
            >
              <option value="">Select Length Type...</option>
              <option value="fixed">Fixed</option>
              <option value="variable">Variable</option>
            </select>
            <br />

            <label>Size:</label>
            <input
              value={this.state.size}
              onChange={this.onChange}
              type="number"
              name="size"
              placeholder="1"
              min="0"
              required
            />
            <br />
          </fieldset>
        </div>
      </div>
    );
  }
}

我发现了一些问题

我看不到任何onChange函数应该处理您的输入大小。 构造函数中未定义初始大小状态 为子组件提供关键道具 =====================

更新

我创造了一个例子

我不太确定这是否是你想要做的。查看我的沙盒链接，并检查它是否是你正在尝试做的

我想若选中了复选框，那个么最后选中的复选框的lengthType、size值应该显示出来。因此，您的大小、长度类型状态应该是一个对象。因为它将为每个字段名保存您的大小和长度类型。所以我改变了它如下

onChange = e => {
    e.persist();
    const { fieldNames } = this.state;
    const lastCheckedFieldName = fieldNames[fieldNames.length - 1];
    this.setState(prevState => {
      return {
        size: {
          ...prevState.size,
          [lastCheckedFieldName]: e.target.value
        }
      };
    });
  };

在渲染函数中，您的输入值引用了this.state.size，我完全不理解这一点，因为您说过希望每个字段都有单独的大小。这应该是动态引用一个对象或数组，该对象或数组具有一个键，该键可能由状态决定，以便分隔每个字段的值

const lastCheckedFieldName = fieldNames[fieldNames.length - 1];

<input
      value={this.state.size[lastCheckedFieldName] || 1}
      onChange={this.onChange}
      type="number"
      name="size"
      placeholder="1"
      min="0"
      required
/>

---

请编辑您的问题，包括相关的代码和信息。我有一个关于尺寸和长度类型的更改，只是没有包括在帖子中。我会更新的。在我的构造函数中，大小和长度类型的情况相同。这真的不是答案。如果你用完整的contextsize更新你的问题，我会更新我的答案。构造函数的状态是数组，但呈现函数引用它时没有键。这也是帖子中未包含的内容吗？我更新了我的答案，并提供了一个沙盒示例，请检查并让我知道它是否适用于您。这确实起到了作用，但现在数据请求中发送的值不正确。它将第一个复选框值添加到lengthType和size。数据：{\name\：\QS7\，\selectorField\：\callee\，\fields\：[{\name\：\action\，\lengthType\：{\action\：\fixed\}、\size\：{\action\：\3\}、\maxArrayElements\：{\action\：\4\}}。因此，这些值的存储方式有些奇怪。我已更新沙盒：。我将提出一个新问题，因为它与原来的问题不同。