Question

我已经在CodeSandBox的注释中解释了这些问题。基本上，我有一个field.names数组，这些数组都带有复选框。选中每个框后，用户应该可以输入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数组响应示例

  "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>
    );
  }
}

https://codesandbox.io/s/7z0y46jw0q

Answer 1

我发现的几个问题

我没有看到任何onChange函数可以处理您输入的尺寸。
未在构造函数中定义初始大小状态
为子组件提供关键道具

====================

更新

我创建了一个示例

https://codesandbox.io/s/kkxv3nl7n5

我不确定这是否是您要尝试的操作。查看我的沙盒链接，并检查它是否是您要尝试的操作。

我认为，如果选中了复选框，那么应该显示最后选中的复选框的lengthType, size值。因此，您的size, lengthType状态应为对象。因为它将保存每个fieldName的大小和长度类型。所以我将其更改如下。

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
/>

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

1 个答案: