Question

在我的代码中，我正在使用 react-select （https://www.npmjs.com/package/react-select）。我要做的是单击“提交”按钮后，我要删除所选的值。

我使用的代码如下所示。

import React, { Component } from 'react'
import { connect } from 'react-redux';
import Select from 'react-select'


class App extends Component {

    clearDataAuto() {
            const { change } = this.props;
            change('letterType','null')
    }

    onAutoLetterSubmit() {
        /* ......*/
        this.clearDataAuto();
    }

  render() {
    return (
      <div className="App">
        <Field name="letterType" component="input" type="hidden"></Field>
    <Select 
            options={letterTypesArray && letterTypesArray.map(letterTypeObj => (
            {
               value: letterTypeObj.TypeID,
               label: letterTypeObj.Type
            }
            ))

           } 
           onChange={(e)=>{change('letterType', e.value);}}
        /> 
    <button  onClick={this.onAutoLetterSubmit}>Submit</button>
      </div>
    )
  }
}

const mapStateToProps = state => {
    return {

    };
};

const mapDispatchToProps = dispatch => {
    return {

    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App);

当我使用普通的<select>和<option>标签而不是react-select时，以上代码运行良好。

现在有人可以在单击“提交”按钮后帮助我从“反应-选择”下拉列表中清除数据吗？

Answer 1

您必须在Select标签中设置值，并清除提交按钮的值onClick。

在这里，我想您的值将存储在letterType的变量props中。

<Select
  options={letterTypesArray && letterTypesArray.map(letterTypeObj => ({
    value: letterTypeObj.TypeID,
    label: letterTypeObj.Type
  }))}
  value={this.props.letterType}
  onChange={(e) => { change('letterType', e.value); }}
/>

希望这对您有帮助！

提交表单后，react-select下拉列表无法清除其值

1 个答案: