根据另一个输入的值更新输入值?

时间:2018-07-17 07:29:23

标签: react-admin

在react-admin中,似乎没有任何方法可以访问输入的状态,也无法为输入添加onChange属性。我们希望能够让用户从诸如AutocompleteInput之类的内容中进行选择,然后在诸如TextInput之类的值中填充一个值。这可能吗?如果是这样,请发布一个代码示例。

这里是一个示例-两个TextInput字段(数量和成本),当用户输入这些值时,它们会自动填充第三个字段,即数量。当使用react-admin时,我们可以这样做:

handleTextInputChange = event => {
    let {target} = event;
    let source = target.getAttribute('source');
    let {record} = this.state;
    let {amount} = record;
    if( 'cost' === source || 'quantity' === source ){
        amount = ( 'cost' === source ? record.quantity*target.value : target.value*record.cost );
    }

    if( source ){
        record[source] = target.value;
        if( 'amount' !== source ){
            record['amount'] = amount;
        }
        this.setState({record: record});
    }
};

render() {
    let {record} = this.state;

    return (
        <form>
            <Grid container spacing={24}>
                <Grid item sm={4} xs={12}>
                    <label>Quantity</label><br />
                    <TextField
                        id="quantity"
                        fullWidth={true}
                        value={this.state.record.quantity}
                        inputProps={{source: "quantity"}}
                        onChange={this.handleTextInputChange}
                    />
                </Grid>
                <Grid item sm={4} xs={12}>
                    <label>Cost</label><br />
                    <TextField
                        id="cost"
                        fullWidth={true}
                        value={this.state.record.cost}
                        inputProps={{source: "cost"}}
                        onChange={this.handleTextInputChange}
                    />
                </Grid>
                <Grid item sm={4} xs={12}>
                    <label>Amount</label><br />
                    <TextField
                        id="amount"
                        fullWidth={true}
                        value={this.state.record.amount}
                        inputProps={{source: "amount"}}
                        disabled={true}
                        onChange={this.handleTextInputChange}
                    />
                </Grid>
            </Grid>
        </form>
    );
}

我们如何使用 react-admin完成此?

0 个答案:

没有答案