如何访问其他字段中的字段数据

IT技术 reactjs antd formik
2021-05-11 12:27:48

我有一个使用Formik. 这里有两张图片，显示了该表单的两种状态，可以用开关切换。最初，我将文本填充到可以动态添加的字段中，并使用 .
第二张图显示了我如何切换到textarea. 在那里，您还可以添加带有逗号的文本，这些文本将变成一个数组。

在此处输入图片说明

在此处输入图片说明

有什么方法可以从第一个屏幕的输入字段中填充数据，切换到textarea并访问已经输入的数据。

我知道 formik 将这种状态保留在某处。但目前这些字段有一个单独的状态。这是我的组件：

class ModalForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      disabled: true,
    };
  }

  onChange = () => {
    this.setState({
      disabled: !this.state.disabled,
    });
  };

  render() {
    var {
      visible = false,
      onCancel,
      onRequest,
      submitting,
      setSubscriberType,
      editing,
      subscriptionTypeString,
      tested,
      selectedGates,
    } = this.props;
    const { gateId } = selectedGates.length && selectedGates[0];
    const handleSubmit = values => {
      console.log(values);
      onRequest && onRequest({ gateId, ...values });
    };
    const { disabled } = this.state;
    return (
      <Modal
        footer={null}
        closable
        title="Список абонентов для выбранного гейта"
        visible={visible}
        onCancel={onCancel}
        onOk={handleSubmit}
        destroyOnClose
        width="600px"
      >
        <StyledDescription>
          <Switch onChange={this.onChange} />
          <StyledLabel>массовый ввод</StyledLabel>
        </StyledDescription>
        <Formik
          initialValues={{ abonents: [''] }}
          onSubmit={handleSubmit}
          render={({ values, handleChange }) => (
            <Form>
              {disabled ? (
                <FieldArray
                  name="abonents"
                  render={arrayHelpers => {
                    return (
                      <div>
                        {values.abonents.map((value, index) => (
                          <div key={index}>
                            <MyTextInput
                              placeholder="Абонент ID"
                              name={`abonents.${index}`}
                              value={value}
                              onChange={handleChange}
                            />
                            <Button
                              shape="circle"
                              icon="delete"
                              onClick={() => {
                                arrayHelpers.remove(index);
                              }}
                            />
                          </div>
                        ))}

                        <Button type="dashed" onClick={() => arrayHelpers.push('')}>
                          <Icon type="plus" />Добавить абонента
                        </Button>
                      </div>
                    );
                  }}
                />
              ) : (
                <StyledField
                  placeholder="Введите ID абонентов через запятую"
                  name="message"
                  component="textarea"
                />
              )}

              <Footer>
                <Button type="primary" htmlType="submit">
                  Запросить
                </Button>
              </Footer>
            </Form>
          )}
        />
      </Modal>
    );
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>

2个回答

非常简单，formik 将值存储在里面values.abonents，因此您可以在 textarea 中使用它

let { Formik, Form, Field, ErrorMessage, FieldArray }  = window.Formik;
function App () {
  const [disabled, setDisabled] = React.useState(false) // some boilerplate code
  function submit (values) {
    console.log('submit', values)
  }
  return (
    <Formik
      initialValues={{ abonents: [] }}
      onSubmit={submit}
      render={({ values, handleChange, setFieldValue }) => (
        <Form>
          <FieldArray
            name='abonents'
            render={arrayHelpers => {
              if (!disabled) {
                return (
                  <textarea onChange={(e) => {
                    e.preventDefault()
                    setFieldValue('abonents', e.target.value.split(', '))
                  }} value={values.abonents.join(', ')}></textarea>
                )
              }
              return (
                <div>
                  {
                    values.abonents.map((value, index) => (
                      <div key={index}>
                        <input
                          placeholder='Абонент ID'
                          name={`abonents.${index}`}
                          value={value}
                          onChange={handleChange}
                        />
                        <button onClick={(e) => {
                          e.preventDefault()
                          arrayHelpers.remove(index)
                        }}>
                          -
                        </button>
                      </div>
                    ))
                  }

                  <button onClick={(e) => {
                    e.preventDefault()
                    arrayHelpers.push('')
                  }}>
                    +
                  </button>
                </div>
              )
            }}
          />
          <button type='submit'>Submit</button>
          <button onClick={e => {
            e.preventDefault()
            setDisabled(!disabled)
          }}>toggle</button>
        </Form>
      )}
    />
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))
<script src="https://unpkg.com/react@16.9.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/formik/dist/formik.umd.production.js"></script>
<div id='root'></div>

我找到了解决办法。您必须为 input 和 textarea 赋予相同的名称，因此当您在 input 中添加文本时会自动更改 textarea 中的文本

                         <FieldArray
              name="abonents"
              render={arrayHelpers => {

和

               <StyledField
                  placeholder="Введите ID абонентов через запятую"
                  name="abonents"
                  component="textarea"
                />

这两个字段具有相同的名称，因此它们可以互换呈现，但内部具有共同的文本

其它你可能感兴趣的问题
上一篇我通过 Link (react-router-dom) 将props传递给功能组件，但它说状态是“未定义” 下一篇React.js - 将props从 hoc 传递给孩子