Question

我想在我的React应用中使用材料ui import * as providers from './search-providers'; // if you are using modules const runTheSearch = async () => { // ... const result = await providers['wikipedia']('this is my search'); // assuming everything is promisified }触发事件onDragStop而不是onChange（以便事件触发的次数更少）。但是，documentation表示Slider函数签名仅包含mouseevent：onDragStop。因此，以下内容适用于function(event: object) => void：

onChange

但是，此事件没有第二个参数<Slider onChange={ (e, val) => this.props.update(e, control.id, val) } />：

val

如何在<Slider onDragStop={ (e, val) => this.props.update(e, control.id, val) } />函数中获取Slider的当前值？请注意，我无法使用onDragStop，因为它引用了父组件。

Answer 1

在较新版本的Material UI中，您可以使用：

<Slider
  onChange={} // for example updating a state value
  onChangeCommitted={} // for example fetching new data
/>

Answer 2

也遇到了这个问题！如果在类中使用组件，请使用两个回调：

<Slider onChange={ (e, val) => this.val = val }  
        onDragStop={ (e) => this.props.update(e, control.id, this.val)
/>

Answer 3

如果您希望Slider值成为组件状态的一部分，例如如果Slider发生变化时触发重新呈现（这需要您将this.state.value传递给Slider），您可以这样做：

class Parent extends Component {
    render() {
        return <Slider value={this.state.value} onChange={this.handleChange} onDragStop={this.handleDragStop}/>
    }

    handleChange = (event, value) => this.setState({ value });

    handleDragStop = () => this.props.update(this.state.value);
}

否则您只需将值分配给this：

class Parent extends Component {
    render() {
        return <Slider onChange={this.handleChange} onDragStop={this.handleDragStop}/>
    }

    handleChange = (event, value) => this.value = value;

    handleDragStop = () => this.props.update(this.value);
}

在onDragStop事件中获取材质ui滑块值（反应）

3 个答案: