如何使用nodejs和reactjs提交动态表的输入?

but5z9lq  于 2021-06-20  发布在  Mysql
关注(0)|答案(0)|浏览(196)

我在reactjs、nodejs和mysql上开发了一个动态表,其中包含产品名称和产品数量,如您所见:

当我提交它,它将被保存,但名称产品的价值 NULL 还有数量 '' ,您可以看到我的代码如下:

handleSubmit() {
    const { selectprdt } = this.state;

    console.log("selectprdt", this.state.selectprdt);
    var facture = {
        Nomp: this.state.selectprdt,
        QuantiteF: this.state.QuantiteF
    };
    axios({
        method: 'post',
        url: '/app/ajouterfact/',
        data: facture,
        withCredentials: true,
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    }).then(function(response) {
        this.setState({ alert: null });
        this.props.history.push('/factures/listefactures')
    }.bind(this));
}
handleQuantiteChange(index, value) {
    const rowDataCopy = this.state.rowData.slice(0);

    rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {
        QuantiteF: parseInt(value, 10)

    });
    this.setState({
        rowData: rowDataCopy
    });
}
handleselectprdtChange(index, value) {
    const rowDataCopy = this.state.rowData.slice(0);

    rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {
        selectprdt: value
    });
    return axios
        .get('/app/getPrixprod/' + value)
        .then(response => {
            if (response && response.data) {
                this.setState(({
                    Prix
                }) => ({
                    rowData: rowDataCopy,
                    Prix: [...Prix, ...response.data]

                }));
            }
        })
        .catch(error => {
            console.error(error);
        });
}

return (
    <div className="animated fadeIn">
        <Table>
            <tbody>
                {this.state.rowData.map((data, index) => (
                            <tr key={index} id={index}>
                                <td>{" "} 
                                    <Input 
                                        type="select"
                                        name="selectprdt" 
                                        id="selectprdt"
                                        placeholder="Veuillez sélectionner un produit"
                                        value={data.selectprdt}
                                        onChange={(e) => this.handleselectprdtChange(index, e.target.value)} >
                                            <option  key={-1} hidden>Choisisr un produit</option>
                                            {  
                                                this.state.Produits.map((pdt, i) => {
                                                    <option key={i}>{pdt.Nomp}</option>
                                                });
                                            }
                                    </Input>
                                </td>
                                <td>
                                    <Input 
                                        type="text" 
                                        value={data.QuantiteF || 0} 
                                        onChange={(e) => this.handleQuantiteChange(index, e.target.value)}/>
                                </td>
                                { console.log('value:',data.QuantiteF, "data type of value", typeof(data.QuantiteF)) }
                                <td>
                                    <p key={index}>
                                        {this.state.Prix[index] && this.state.Prix[index].PrixV}
                                    </p>
                                </td>
                                <td> 
                                    <p key={index} className='pa2 mr2 f6'>
                                        { (data.QuantiteF || 0) * (parseInt(this.PrixDisplay(data.selectprdt)|| 0)) }
                                    </p>
                                </td>
                                <td>
                                    <Button 
                                        onClick={(e) => this.handleRowDelete(index)}
                                        active 
                                        style={center}
                                        size="sm" 
                                        color="danger"
                                        className="btn-pill"
                                        aria-pressed="true">Effacer
                                    </Button>
                                </td>
                                {" "}
                            </tr>
                            ))}
                            <tr>
                                <td/>
                                <td/>
                                <td/>
                                <td/>
                                <td>
                                    <Button 
                                        onClick={this.handleRowAdd}
                                        active 
                                        style={center}
                                        size="sm" 
                                        color="info" 
                                        className="btn-pill" 
                                        aria-pressed="true">Ajouter une ligne
                                    </Button>
                                </td>
                        </tr>
        </tbody>
        </Table>
    </div>)
};

我的路由器是:

exports.ajouterfact = function(req, res) {
    console.log("req", req.body);
    var today = new Date();

    var factures = {
        "Nfact": req.body.Nfact,
        "Nom": req.body.Nom,
        "Datefact": req.body.Datefact,
        "Note": req.body.Note,
        "Nomp": req.body.Nomp,
        "QuantiteF": req.body.QuantiteF,

    }
    connection.query('INSERT INTO factures SET ?', factures, function(error, results, fields) {
        if (error) {
            console.log("error ocurred", error);
            res.send({
                "code": 400,
                "failed": "error ocurred"
            })
        }
        else {

            res.send({
                "code": 200,
                "success": "facture registered sucessfully"
            });
        }

    })
};

如何获得产品名称和数量的值?

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题