在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完成此?