2

在 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 来实现这一点？

4

0 回答 0