javascript - 防止传播 - OnTouch Select - Material React

Question

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

我想阻止 Click 上的事件传播，这是我的代码:

<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>

当打开选择时，事件继续处理 TextField，但我只想打开 Select 组件中的列表。

Answer 1

我终于解决了包括事件onClick和管理事件的问题。

<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。