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

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": [
    {
        "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

我发现的一些问题

1. 我没有看到任何应该处理您输入的大小的 onChange 函数。
2. 构造函数中未定义初始大小状态
3. 为子组件提供关键 props

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

更新

我创建了一个示例

https://codesandbox.io/s/kkxv3nl7n5

我不太确定这是否是您想要做的。请参阅我的沙箱链接并检查这是否是您想要执行的操作。

我认为如果选中了复选框，则应显示上次选中的复选框的 lengthType, size 值。因此，您的 size, lengthType 状态应该是 Object。因为它会保存每个 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
/>