Блог

Главная - Вопросы по программированию - handleChange не работает для formik внутри модального

handleChange не работает для formik внутри модального

#reactjs #antd #formik

#reactjs #antd #formik

Вопрос:

я новичок в react, и я пытался сделать рендеринг формы внутри модального из antd, но мой handleChange не работает. обычно это работает, если я пишу все внутри модального, но я хочу знать, как это можно сделать, используя другой компонент и используя formik

 const InnerForm=({
                     submitted,
                     loading,
                     errors,
                     handleSubmit,
                     handleChange,
                     values,
                     modalCancel
                 })=>
    (
        <Form className="form" onSubmit={handleSubmit}>
            <FormItem>
                <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                       placeholder="email"
                       onChange={handleChange}
                       name={"email"}
                />
            </FormItem>
            <FormItem>
                <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                       type="password"
                       placeholder="Password"
                       onChange={handleChange}
                       name={"password"}
                />
            </FormItem>
            <FormItem>
                <Button className={'button_margin'} onClick={modalCancel} type={"primary"}><Icon type="left"/>Go back</Button>
                <Button className={'button_margin'} type={"primary"}>Submit</Button>
            </FormItem>
        </Form>

    );

class App extends Component{
 constructor(props) {
        super(props);
        this.state = {
            is_authenticated: false,
            application_status_modal_visible: false,
        }
    }
handleChange =(event)=>{
        const {name,value}=event.target;
        this.setState({
            [name]: value,
        });
        console.log("handle change works");
   };
    handleSubmit=(values)=>{
    console.log(values);
    };
    modalCancel=()=>{
        this.setState({application_status_modal_visible:false})
    };
render(){
return(
<Modal
                    title="Login"
                    visible={application_status_modal_visible}
                    footer={null}
                   >
                    <Formik onSubmit={this.handleSubmit}
                            handleChange={this.handleChange}
                            render={formikProps =>
                                <InnerForm
                                    modelCancel={this.modalCancel}
                                    {...formikProps}
                                />
                            }/>
                </Modal>)
}
}

export default connect()(App)

я ожидаю, что этот вывод {email:»abc@gmail.com «,пароль: «1234567»}

Комментарии:

1. вопрос, который я хотел бы задать: почему вы используете formik, если у вас есть ваша handleChange функция? при этом … ваш Input компонент, было бы неплохо его увидеть. И поскольку вы используете свой внешний handleChange (formik делает это правильно), вы хотели бы передать свои значения из состояния в InputForm , а затем в Input компонент

2. причина, по которой я использую formik, заключается в проверке вводимых входных данных, и о handleChange я также передаю formikprops, поэтому handleChange также будет реквизитом для внутренней формы, можете ли вы предложить какой-то другой способ справиться с этим @delis

3. У меня было мало времени … если вам все еще нужна помощь в этом, я бы посмотрел на это в ближайшее время…

4. Какой модальный вы используете?

Ответ №1:

<Formik> Компонент не принимает prop handleChange ; он передает вызываемый prop для рендеринга handleChange , и вы можете использовать это по-своему, например так (я не перечисляю все другие необходимые реквизиты):

 <Formik>
  ({ handleChange }) => (
    <input
     onChange={
      (e) => { 
        /* custom stuff */ 
        handleChange(e)}
       } 
    />
   )
</Formik>