handleChange 不适用于模态中的 formik答案

【问题标题】：handleChange is not working for formik inside a modalhandleChange 不适用于模态中的 formik
【发布时间】：2019-04-14 13:07:47
【问题描述】：

我是新来的反应，我试图在 antd 的模态中渲染一个表单，但我的 handeChange 不起作用。如果我在模态中编写所有内容，这通常可以工作，但我想知道如何通过使用不同的组件和使用 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",password:"1234567"}

【问题讨论】：

我要问的问题是：如果你有handleChange 函数，为什么还要使用formik？话虽这么说......你的Input 组件，很高兴看到它。而且由于您使用的是外部handleChange（formik 这样做），您可能希望将值从状态传递到InputForm，然后传递到Input 组件
我使用formik的原因是为了验证正在输入的输入，关于handleChange我也在传递formikprops，所以handleChange也将是InnerForm的道具，你能建议一些不同的方法吗处理这个@delis
没有太多时间...如果您在这方面仍然需要帮助，我会尽快查看...
你使用的是什么模式？

标签： reactjs antd formik

【解决方案1】：

<Formik> 组件不接受 prop handleChange；它传递了一个名为 handleChange 的渲染道具，您可以像这样以自定义方式使用它（我没有列出所有其他必需的道具）：

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

【讨论】：