组件正在将类型为undefined的不受控制的输入更改为受控

时间:2020-06-09 11:49:51

标签: reactjs spring-boot

警告:组件正在更改类型undefined为受控的不受控制的输入。输入元素不应从不受控制切换为受控制(反之亦然)。确定在组件的使用寿命期间使用受控或不受控制的输入元素。更多信息:fb.me/react-control-components

onChange = event => {
      const{name,value}=event.target;
        this.setState({
            [name]:value
        });
    };

    showEditDialog() {
        this.setState({
            ilac: {
                id: this.selectedIlac.id,
                ilacAdi: this.selectedIlac.ilacAdi
            }
        });
    }

    save = async event => {
        event.preventDefault();

        const ilac = {
            id: this.state.id,
            ilacAdi: this.state.ilacAdi
        }
        try {
            const response = await this.ilacService.save(ilac);
        } catch (error) {

        }

        this.ilacService.getAll().then(data => this.setState({ ilac: data }))
        this.state.selectedIlac.ilacAdi = '';
        // this.setState({value:  this.state.selectedIlac.ilacAdi});
    }

    put = async event => {
        event.preventDefault();

        const ilac = {
            id: this.state.selectedIlac.id,
            ilacAdi: this.state.selectedIlac.ilacAdi
        }
        try {
            const response = await this.ilacService.put(ilac);
        } catch (error) {

        }

        this.ilacService.getAll().then(data => this.setState({ ilac: data }))
        this.state.selectedIlac.ilacAdi = '';
        // this.setState({value:  this.state.selectedIlac.ilacAdi});
    }


    render() {
        return (
            <Panel style={{ width: "60%", margin: "0 auto", marginTop: "40px" }} header="İlaç Listesi">
                <div className="content-section implementation" style={{ marginBottom: "200px" }}>
                    <div className="p-inputgroup">
                        <InputText value={this.state.selectedIlac.ilacAdi} name="ilacAdi" onChange={this.onChange} placeholder="İlaçAdı" />
                    </div>
                    <br></br>
                    <div>
                        <Button onClick={this.save} label="Save" icon="pi pi-plus" iconPos="right" />
                        <Button onClick={this.put} className="p-button-warning" label="Update" icon="pi pi-check" iconPos="right" />
                        <Button className="p-button-danger" label="Delete" icon="pi pi-trash" iconPos="right" />
                    </div>
                </div>


            {/* paginator={true} rows="10" */}
            <DataTable onClick={this.showEditDialog} value={this.state.ilac} selectionMode="single" selection={this.state.selectedIlac} onSelectionChange={e => this.setState({ selectedIlac: e.value })} >
                <Column field="id" header="ID"></Column>
                <Column field="ilacAdi" header="İLAÇ ADI"></Column>
            </DataTable>
        </Panel>
    );
}`

0 个答案:

没有答案