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，但我只想在选择组件中打开列表。

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。

防止传播-OnTouch Select-物料反应

1 个答案: