防止传播 - 触摸选择 - 材质反应

Question

我正在使用ReactJS和库@material-ui/core。

我想阻止事件在点击上传播，这是我的代码：

<NumPad.Number 
onChange={val => { this.setPrice(val) } }>
<TextField
label={needsUnits ? "Precio Unitario" : "Precio"}
id="simple-start-adornment"
placeholder="20.00"
InputProps={{
startAdornment: 
<InputAdornment position="start">
{this.state.params.businessCurrency === 3 &&
<Select value={this.state.service.currency} 
name="currency" id="currency"
style={{zIndex: 1000}}
onChange={(event) => this.setState({ service: { ...this.state.service, currency: event.target.value } })}
inputProps={{ name: 'age', id: 'age-simple', }}>
<MenuItem value={1}>Bs. </MenuItem>
<MenuItem value={2}>USD </MenuItem>
</Select>}
{this.state.params.businessCurrency !== 3 &&
getCurrencyAbbreviation(this.state.params.businessCurrency) }
</InputAdornment>,
}}
value={this.state.service.price}
/>
</NumPad.Number>

打开选择后，事件继续使用文本字段，但我只想在选择组件中打开列表。

Answer 1

我终于解决了这个问题，包括点击事件和管理事件。

<Select value={this.state.service.currency} 
name="currency" id="currency"
onChange={(event) => this.setState({ service: { ...this.state.service, currency: event.target.value } })}
onClick={this.preventPropagation}
inputProps={{ name: 'age', id: 'age-simple', }}>
<MenuItem value={1}>Bs. </MenuItem>
<MenuItem value={2}>USD </MenuItem>
</Select>

并且事件必须停止传播。

preventPropagation(e) {
e.stopPropagation();
e.preventDefault();
}

我也不需要在样式中添加 zIndex。