Группа флажков внутри компонента Formik - PullRequest
Новая
       5

Группа флажков внутри компонента Formik

0 голосов
/ 21 июня 2019

У меня проблемы с отслеживанием флажков в <Formik>.Когда вы выбираете схему, она отображает соответствующее количество флажков X.Когда один выбран, он должен обновить в значениях реквизита.Начальное состояние флажка находится внутри TableRowWithCheckbox

 export default class TableRowWithCheckbox extends Component {
  constructor(props) {
    super(props);
    const { initialState } = this.props;
    this.state = {
      fieldCheckbox: initialState
    };
  }

  checkbox = () => {
    this.setState({ fieldCheckbox: !this.state.fieldCheckbox }, () => {
      console.log("checkbox --> ", this.state.fieldCheckbox);
      const { name, dataType, position, box } = this.props;
      box({
        name,
        dataType,
        position,
        isChecked: this.state.fieldCheckbox
      });
    });
  };

  render() {
    const {
      name,
      dataType,
      position,
      handleChange
    } = this.props;
    const { fieldCheckbox } = this.state;
    return (
      <React.Fragment>
        <Table.Row>
          <Checkbox
            style={{ marginTop: "20px", marginLeft: "10px" }}
            name="selectedFields"
            checkbox
            onChange={this.checkbox}
          />
          <Table.Cell>{name}</Table.Cell>
          <Table.Cell>{dataType}</Table.Cell>
          <Table.Cell>{position}</Table.Cell>
          <Table.Cell>
            <Input
              onChange={e => handleChange(e, name)}
              value={this.state.size}
              type="number"
              name="size"
              min="1"
              placeholder="1"
              disabled={!this.state.fieldCheckbox}
              required
            />
          </Table.Cell>
          <Table.Cell>
            <Input
              onChange={e => handleChange(e, name)}
              value={this.state.maxArrayElements}
              type="number"
              name="maxArrayElements"
              placeholder="1"
              min="1"
              max="100"
              disabled={!this.state.fieldCheckbox}
              required
            />
          </Table.Cell>
        </Table.Row>
      </React.Fragment>
    );
  }
}

Затем внутри основного компонента компонент TableRowWithCheckbox отображается внутри компонента <Formik> с соответствующим props.Я не уверен, как подключить этот пользовательский компонент к Formik. 

    <TableRowWithCheckbox
      id={name}
      name={name}
      dataType={dataType}
      value={values.selectedFields}
      position={position}
      initialState={Object.keys(
        selectedFields
      ).includes(name)}
      box={this.checkbox.bind(this)}
      handleChange={this.onChange}
    />
  </React.Fragment>

Вот codesandbox с кодом

...