Передача значений в компонент высшего порядка с помощью React и Formik - PullRequest
Новая
       8

Передача значений в компонент высшего порядка с помощью React и Formik

0 голосов
/ 29 апреля 2018

В настоящее время я работаю с реакцией и формиком, чтобы разместить формы на своей странице, но у меня возникли проблемы. В настоящее время у меня есть переменная состояния с именем inputValue, которую я хочу использовать в качестве держателя, когда пользователь вводит в форму. Проблема, с которой я сталкиваюсь, заключается в получении этого в handleSubmit в withFormik.

Причина этого в том, что я хочу манипулировать данными при определенных обстоятельствах. Я знаю, что могу использовать values от Formik, но я не знаю, как манипулировать этим. Есть ли способ передать inputValue в HoC, который является withFormik, или это невозможно? 

class SendMessageContainer extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
        inputValue: '',
      };
      this.handleChange = this.handleChange.bind(this);
   }

  handleChange = (e) => {
    this.setState({ inputValue: e.target.value });
  };

  render() {
     const {
        placeholder,
        values,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting,
        channelId,
     } = this.props;

     return (
        <Input
           onKeyDown={(e) => {
              if (e.keyCode === ENTER_KEY && !isSubmitting) {
                 handleSubmit(e);
              }
           }}
           onChange={(e) => {
              this.handleChange(e);
           }}
           onBlur={handleBlur}
           name="message"
           value={this.state.inputValue}
           placeholder={`Message #${placeholder}`}
        />
     );
   }
}

export default withFormik({
  mapPropsToValues: () => ({ message: '' }),
  handleSubmit: async (values, { props, setSubmitting, resetForm }) => 
  {
     if (!values.message || !values.message.trim()) {
        setSubmitting(false);
        return;
     }

     await props.onSubmit(values.message);
     resetForm(false);
  },
})(SendMessageContainer);
...