如何在反应输入中设置状态值?

时间:2021-03-22 12:27:40

标签: reactjs forms input setstate formik

你能帮助我如何在输入字段中显示状态值并且输入字段是可编辑的。我正在尝试很多技巧,但没有帮助,在 Stackoverflow 中也找不到...................................... .... 我想在输入字段中显示品牌代码状态属性“BrandCode”值......................................

这里是品牌代码返回值

品牌代码:{ 品牌代码:“尼克”, 品牌 ID:1 }



state = {
        brandcode: [],
    };

 Getbrandcode(brandId) {
        getBrandCode(brandId)
            .then(res => {
                debugger;
                //console.log(res);
                this.setState({
                    brandcode: res.data.Data // i want show brandcode values in input 
                });
            });
    }
``
its a render.....
``
render() {

        // const { formikProps} = this.props
        return (
            <Formik
                enableReinitialize={true}
                initialValues={this.masterstyledata}
                onSubmit={(values, actions) => {
                    this.onSaveClick(values);
                }}


                validationSchema={this.validationSchema}
            >
                {formikProps => (
                    <>
                       
                        <Card>
                            <CardBody>
                                {this.state.isLoading && <LoadingPanel />}
                                <Row>
                                    <Col lg={12}>
                                        <Form>
                                            <FormGroup row>
                                                
                                                <Label for="Value" sm={3}>Brand</Label>
                                                <Col sm={3}>
                                                    <ComboBoxValue
                                                        data={this.state.branddesc}
                                                        style={{ width: '100%' }}
                                                        name="BrandID"
                                                        textField="text"
                                                        valueField="Value"
                                                        dataItemKey="Value"
                                                        onChange={(e) => {
                                                            this.BrandCodehandleChange(e);
                                                            formikProps.setFieldValue("BrandID", e.target.value)
                                                        }}
                                                        value={formikProps.values.BrandID}
                                                        placeholder="Brand Description"
                                                    />
                                                </Col>
                                            </FormGroup>
                                            <FormGroup row>
                                                //here i want set values
                                                <Label for="BrandCode" sm={3}>Style ID</Label>
                                                <Col sm={3}> <Input sm={3}
                                                    type="text"
                                                    name="BrandCode"
                                                    id="BrandCode"
                                                    onChange={formikProps.handleChange('MasterStyleCode')}
                                                    value={formikProps.values.MasterStyleCode}
                                                    placeholder="Enter Style Id"
                                                />
                                                    <Error>{formikProps.errors.MasterStyleCode}</Error>
                                                </Col>

                                           </FormGroup>
                                        </Form>
                                    </Col>
                                </Row>
                            </CardBody>
                        </Card>

1 个答案:

答案 0 :(得分:0)

您在此处使用 handleOnChageonChange 时犯了一个错误:

onChange={formikProps.handleChange('MasterStyleCode')}

在渲染时将执行此函数,结果为 undefined如您所知,因为它是一个 void 函数!),这不是您想要的,要解决此问题如果您的输入 setFieldValue 与您想要更改它的 initialValue 键不同,您必须制作一个 HOF 并使用 name,例如:

onChange={(event) => {
   formikProps.setFieldValue('MasterStyleCode', event.target.value)
}}