反應選擇值未重置為 setState 上的占位符文本

Question

我有兩個反應選擇下拉列表，我希望第二個下拉列表重置並顯示占位符文本。 當第一個下拉列表更改時，我將 stet 變量設置為 null。 我在后端代碼中將值設為 null，但未刪除 ui 上的值。 可以請一些人幫助我如何重置第二個下拉列表中的值並顯示占位符文本。

我有一些回調函數可以設置兩個下拉菜單的選項。 所以，請暫時忽略這些。

import React, {Component} from 'react'
Import Select from 'react-select'

Class test extends Component{
    constructor(props){
        super(props)
        this.state={
            val1= null,
            val1_options=[],
            val2= null,
            val2_options=[]
        }
        this.handleVal1Change = this.handleVal1Change.bind(this)
        this.handleVal2Change = this.handleVal2Change.bind(this)       
      }
    }
    handleVal1Change(value1) {
    
        this.setState({
            val1: value1.value,
            val2: null,
            val2_options: null
        })
    }
    
    handleVal2Change(value2) {
        this.setState({
            val2: value2.value
        })
    }
    
    render() {
        return (
            <div>
                <Select
                    placeholder='select val1'
                    options={this.state.val1_options}
                    onChange={this.handleVal1Change}
                />
            </div>
            <div>
                <Select
                    placeholder='select val2'
                    defaultValue={this.state.val2}
                    options={this.state.val2_options}
                    onChange={this.handleVal2Change}
                />
            </div>
        
        )
    }
    
export default test

Answer 1

您正在非受控模式下使用Select組件，這意味着組件未連接到this.state.val1或this.state.val2 。 您為第二個組件設置的defaultValue僅用作初始值。 當第一個組件中的this.state.val2發生變化時，第二個組件不會注意到變化。

使用value而不是defaultValue ：

<Select
  placeholder='select val2'
  value={this.state.val2}
  options={this.state.val2_options}
  onChange={this.handleVal2Change}
/>