Cách đặt giá trị mặc định trong chọn phản ứng

Tôi gặp sự cố khi sử dụng react-select. Tôi sử dụng biểu mẫu redux và tôi đã làm cho thành phần chọn phản ứng của mình tương thích với biểu mẫu redux. Đây là mã:

const MySelect = props => (
    <Select
        {...props}
        value={props.input.value}
        onChange={value => props.input.onChange(value)}
        onBlur={() => props.input.onBlur(props.input.value)}
        options={props.options}
        placeholder={props.placeholder}
        selectedValue={props.selectedValue}
    />
);

và đây là cách tôi kết xuất nó:

<div className="select-box__container">
    <Field
    id="side"
    name="side"
    component={SelectInput}
    options={sideOptions}
    clearable={false}
    placeholder="Select Side"
    selectedValue={label: 'Any', value: 'Any'}
    />
</div>

Nhưng vấn đề là trình đơn thả xuống của tôi không có giá trị mặc định như tôi muốn. Tôi đang làm gì sai? Có ý kiến ​​gì không?

Tôi đoán bạn cần một cái gì đó như thế này:

const MySelect = props => (
<Select
    {...props}
    value={props.options.filter(option => option.label === 'Some label')}
    onChange={value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />
);

Tôi đã sử dụng tham số defaultValue, dưới đây là mã cách tôi đạt được giá trị mặc định cũng như cập nhật giá trị mặc định khi một tùy chọn được chọn từ trình đơn thả xuống.

<Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>

Nếu bạn đã đến đây để tham gia react-select v2 và vẫn gặp sự cố - phiên bản 2 hiện chỉ chấp nhận một đối tượng là value,defaultValue vv

Đó là, hãy thử sử dụng value={{value: 'one', label: 'One'}}, thay vì chỉ value={'one'}.

Tôi đã gặp một lỗi tương tự. Đảm bảo rằng các tùy chọn của bạn có thuộc tính giá trị.

<option key={index} value={item}> {item} </option>

Sau đó, so khớp giá trị phần tử được chọn ban đầu với giá trị tùy chọn.

<select 
    value={this.value} />

Mở rộng câu trả lời của @ isaac-pak, nếu bạn muốn chuyển giá trị mặc định cho thành phần của mình trong một phần mềm hỗ trợ, bạn có thể lưu nó ở trạng thái trong phương thức vòng đời componentDidMount () để đảm bảo giá trị mặc định được chọn lần đầu tiên.

Lưu ý, tôi đã cập nhật mã sau để làm cho nó hoàn thiện hơn và sử dụng một chuỗi trống làm giá trị ban đầu cho mỗi nhận xét.

export default class MySelect extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedValue: '',
        };
        this.handleChange = this.handleChange.bind(this);

        this.options = [
            {value: 'foo', label: 'Foo'},
            {value: 'bar', label: 'Bar'},
            {value: 'baz', label: 'Baz'}
        ];

    }

    componentDidMount() {
        this.setState({
            selectedValue: this.props.defaultValue,
        })
    }

    handleChange(selectedOption) {
        this.setState({selectedValue: selectedOption.target.value});
    }

    render() {
        return (
            <Select
                value={this.options.filter(({value}) => value === this.state.selectedValue)}
                onChange={this.handleChange}
                options={this.options}
            />
        )
    }
}

MySelect.propTypes = {
    defaultValue: PropTypes.string.isRequired
};

Tôi chỉ tự mình trải qua điều này và chọn đặt giá trị mặc định tại hàm INIT của bộ giảm tốc.

Nếu bạn ràng buộc lựa chọn của mình với redux thì tốt nhất không nên 'hủy ràng buộc' nó bằng một giá trị mặc định được chọn không đại diện cho giá trị thực, thay vào đó hãy đặt giá trị khi bạn khởi tạo đối tượng.

Nếu bạn không sử dụng redux-form và bạn đang sử dụng trạng thái cục bộ cho các thay đổi thì thành phần react-select của bạn có thể trông giống như sau:

class MySelect extends Component {

constructor() {
    super()
}

state = {
     selectedValue: 'default' // your default value goes here
}

render() {
  <Select
       ...
       value={this.state.selectedValue}
       ...
  />
)}

Sử dụng các đạo cụ defaultInputValue như sau:

<Select
   name="name"
   isClearable
   onChange={handleChanges}
   options={colourOptions}
   isSearchable="true"
   placeholder="Brand Name"
   defaultInputValue="defaultInputValue"
/>

          

để tham khảo thêm https://www.npmjs.com/package/react-select

Bạn cần thực hiện tìm kiếm sâu nếu sử dụng các nhóm trong các tùy chọn:

options={[
  { value: 'all', label: 'All' },
  {
    label: 'Specific',
    options: [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      { value: 'three', label: 'Three' },
    ],
  },
]}

const deepSearch = (options, value, tempObj = {}) => {
  if (options && value != null) {
    options.find((node) => {
      if (node.value === value) {
        tempObj.found = node;
        return node;
      }
      return deepSearch(node.options, value, tempObj);
    });
    if (tempObj.found) {
      return tempObj.found;
    }
  }
  return undefined;
};

Nếu tùy chọn của bạn như thế này

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

Của bạn {props.input.value}phải khớp với một 'value'trong những{props.options}

Có nghĩa là, props.input.valuephải là 'one'hoặc'two'

Để tự động chọn giá trị trong phần chọn.

<div className="form-group">
    <label htmlFor="contactmethod">Contact Method</label>
    <select id="contactmethod" className="form-control"  value={this.state.contactmethod || ''} onChange={this.handleChange} name="contactmethod">
    <option value='Email'>URL</option>
    <option value='Phone'>Phone</option>
    <option value="SMS">SMS</option>
    </select>
</div>

Sử dụng thuộc tính giá trị trong thẻ chọn

value={this.state.contactmethod || ''}

giải pháp đang làm việc cho tôi.

1. Tạo thuộc tính trạng thái cho văn bản tùy chọn mặc định trong hàm tạo
   • Đừng lo lắng về giá trị tùy chọn mặc định
2. Thêm thẻ tùy chọn vào chức năng kết xuất. Chỉ hiển thị bằng cách sử dụng biểu thức trạng thái và bậc ba
3. Tạo một hàm để xử lý khi một tùy chọn được chọn

4. Thay đổi trạng thái của giá trị tùy chọn mặc định trong hàm xử lý sự kiện này thành null

   Class MySelect extends React.Component
   {
       constructor()
       {
           super()
           this.handleChange = this.handleChange.bind(this);
           this.state = {
               selectDefault: "Select An Option"
           }
       }
       handleChange(event)
       {
           const selectedValue = event.target.value;
           //do something with selectedValue
           this.setState({
               selectDefault: null
           });
       }
       render()
       {
           return (
           <select name="selectInput" id="selectInput" onChange={this.handleChange} value= 
               {this.selectedValue}>
            {this.state.selectDefault ? <option>{this.state.selectDefault}</option> : ''}
               {'map list or static list of options here'}
           </select>
           )
       }
   }
   

Tôi thường xuyên sử dụng một cái gì đó như thế này.

Giá trị mặc định từ các đạo cụ trong ví dụ này

if(Defaultvalue ===item.value) {
    return <option key={item.key} defaultValue value={item.value}>{plantel.value} </option>   
} else {
    return <option key={item.key} value={item.value}>{plantel.value} </option> 
}