时间戳

首页 > 解决方案 > 如何在反应输入中设置状态值？

reactjs - 如何在反应输入中设置状态值？

问题描述

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

这是品牌代码返回值

品牌代码：{品牌代码：“尼克”，品牌 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>

标签： reactjsformsinputsetstateformik

解决方案

你在使用handleOnChageand时犯了一个错误onChange，这里：

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

在渲染时，这个函数将被执行，结果是undefined（如你所知，因为它是一个 void 函数！），这不是你想要的，要解决这个问题，你必须制作一个 HOF 并使用setFieldValue如果你的输入name不同于您要更改它的 initialValue 键，例如：

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

推荐阅读