Как использовать React-хуки для функции и передать функцию в качестве реквизита для создания универсального c модального? - PullRequest
Новая
       66

Как использовать React-хуки для функции и передать функцию в качестве реквизита для создания универсального c модального?

1 голос
/ 04 мая 2020

Я создал очень простой модал из antd, и я хочу использовать этот модальный базис c в качестве модального универсального c для многих частей моего приложения. Однако я не могу понять, как сначала использовать обработчик реакции для функции с параметрами, а затем как передать эту функцию в модальный компонент в качестве подпорки. 

  const [visible, setVisible] = useState(false)
  const [title, setTitle] = useState('New Folder')
  const [inputValue, setInputValue] = useState('Untitled Folder')
  const [buttonText, setButtonText] = useState('Create')
  const [submissionAction, setSubmissionAction] = useState('New Folder')

<Modal
        width={300}
        centered={true}
        visible={visible}
        onCancel={handleCancel}
        footer={[
          <Button key="back" onClick={handleCancel}>
            Cancel
          </Button>,
          <Button
            key="submit"
            type="primary"
            loading={loading}
            onClick={() => {
              form
                .validateFields()
                .then((values) => {
                  console.log(values)
                  if (submissionAction === 'New Folder') {
                    createNewFolder(values.name)
                  } else if (submissionAction === 'New File') {
                    createNewFile(values.name)
                  }
                  setVisible(false)
                })
                .catch((info) => {
                  console.log('Validate Failed:', info)
                })
            }}
          >
            {buttonText}
          </Button>,
        ]}
      >
        <div
          style={{
            fontSize: '16px',
            fontWeight: 'bold',
            paddingBottom: '15px',
            color: 'black',
          }}
        >
          {title}
        </div>
        <Form
          form={form}
          layout="vertical"
          name="form_in_modal"
          initialValues={{ name: inputValue }}
        >
          <Form.Item
            rules={[
              {
                required: true,
                message: 'Please enter a name',
              },
            ]}
            name="name"
          >
            <Input type="textarea" value={inputValue} />
          </Form.Item>
        </Form>
      </Modal>

Обратите внимание на переменные, такие как buttonText или title - Dynami c, я использую хуки для них, и позже, когда я сделаю этот модал в обобщенном c компоненте, я передам значения как реквизиты. Как я могу передать значение функций в onClick как реквизиты? И как бы я даже сохранил их, используя состояние для начала?

Как вместо использования строки (submissionAction) для представления какой функции вызывать, скажем, у меня есть хук для функции, поэтому, когда пользователь нажимает на кнопку, чтобы создать новую папку, я установлю значение этой ловушки, чтобы быть соответствующей функцией createNewFolder, иначе createNewFile или editFolder et c. Затем я передам значение этого хука в обобщенный c модальный компонент, чтобы я мог использовать его во всем приложении. Как я могу это сделать? Или есть лучший способ сделать то, что я пытаюсь достичь. Нужно ли создавать модальный компонент в каждом компоненте, где я использую модальный, или я могу использовать один модальный для всех?

...