วิธีตั้งค่าเริ่มต้นใน react-select

ฉันมีปัญหาในการใช้ react-select ฉันใช้แบบฟอร์ม redux และฉันได้ทำให้ส่วนประกอบการเลือกปฏิกิริยาของฉันเข้ากันได้กับฟอร์ม redux นี่คือรหัส:

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}
    />
);

และนี่คือวิธีแสดงผล:

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

แต่ปัญหาคือดรอปดาวน์ของฉันไม่มีค่าเริ่มต้นตามที่ฉันต้องการ ฉันทำอะไรผิด? ความคิดใด ๆ ?

ฉันเดาว่าคุณต้องการสิ่งนี้:

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}
  />
);

ฉันใช้พารามิเตอร์ defaultValue ด้านล่างนี้เป็นรหัสที่ฉันได้รับค่าเริ่มต้นและอัปเดตค่าเริ่มต้นเมื่อตัวเลือกถูกเลือกจากเมนูแบบเลื่อนลง

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

หากคุณมาที่นี่เพื่อตอบสนองการเลือก v2 และยังคงมีปัญหา - รุ่นที่ 2 ตอนนี้ยอมรับเฉพาะวัตถุที่เป็นvalue, defaultValueฯลฯ

นั่นคือลองใช้แทนเพียงvalue={{value: 'one', label: 'One'}}value={'one'}

ฉันพบข้อผิดพลาดที่คล้ายกัน ตรวจสอบให้แน่ใจว่าตัวเลือกของคุณมีแอตทริบิวต์ค่า

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

จากนั้นจับคู่ค่าองค์ประกอบที่เลือกในตอนแรกกับค่าตัวเลือก

<select 
    value={this.value} />

การขยายคำตอบของ @ isaac-pak หากคุณต้องการส่งผ่านค่าเริ่มต้นไปยังส่วนประกอบของคุณใน prop คุณสามารถบันทึกไว้ในสถานะในวิธีการวงจรชีวิต componentDidMount () เพื่อให้แน่ใจว่าค่าเริ่มต้นถูกเลือกในครั้งแรก

หมายเหตุฉันได้อัปเดตรหัสต่อไปนี้เพื่อให้สมบูรณ์ยิ่งขึ้นและใช้สตริงว่างเป็นค่าเริ่มต้นต่อความคิดเห็น

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

ใช้อุปกรณ์ประกอบฉาก defaultInputValue ดังนี้:

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

          

สำหรับข้อมูลอ้างอิงเพิ่มเติมhttps://www.npmjs.com/package/react-select

ฉันเพิ่งทำสิ่งนี้ด้วยตัวเองและเลือกที่จะตั้งค่าเริ่มต้นที่ฟังก์ชันลด INIT

หากคุณเชื่อมโยงสิ่งที่คุณเลือกเข้ากับ redux ดังนั้นอย่าดีที่สุดที่จะ "ยกเลิกการผูก" ด้วยค่าเริ่มต้นที่เลือกซึ่งไม่ได้แสดงถึงค่าจริงให้ตั้งค่าเมื่อคุณเริ่มต้นวัตถุแทน

หากคุณไม่ได้ใช้รูปแบบซ้ำซ้อนและคุณกำลังใช้สถานะภายในสำหรับการเปลี่ยนแปลงองค์ประกอบการเลือกปฏิกิริยาของคุณอาจมีลักษณะดังนี้:

class MySelect extends Component {

constructor() {
    super()
}

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

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

คุณต้องทำการค้นหาในเชิงลึกหากคุณใช้กลุ่มในตัวเลือก:

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

หากตัวเลือกของคุณเป็นเช่นนี้

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

ของคุณ{props.input.value}ควรตรงกับหนึ่ง'value'ในไฟล์{props.options}

ความหมายprops.input.valueควรเป็น'one'หรือ'two'

ในการเลือกค่าของในเลือกโดยอัตโนมัติ

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

ใช้แอตทริบิวต์ค่าในแท็กเลือก

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

วิธีแก้ปัญหากำลังทำงานให้ฉัน

1. สร้างคุณสมบัติของรัฐสำหรับข้อความตัวเลือกเริ่มต้นในตัวสร้าง
   • ไม่ต้องกังวลกับค่าตัวเลือกเริ่มต้น
2. เพิ่มแท็กตัวเลือกในฟังก์ชันการแสดงผล แสดงเฉพาะโดยใช้ state และ ternary expression
3. สร้างฟังก์ชันเพื่อจัดการเมื่อตัวเลือกถูกเลือก

4. เปลี่ยนสถานะของค่าตัวเลือกเริ่มต้นในฟังก์ชันตัวจัดการเหตุการณ์นี้เป็นค่าว่าง

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

ฉันใช้อะไรแบบนี้บ่อยๆ

ค่าเริ่มต้นจากอุปกรณ์ประกอบฉากในตัวอย่างนี้

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