React: benutzerdefiniertes Element auswählen

Question

Got müde Firefox hässlich auswählen und nicht in der Lage, es zu stylen. Ich dachte, ich würde eine in React zu Lernzwecken tun.

Es scheint einfach zu implementieren, aber ich kann nicht herausfinden, wie man onChange mit benutzerdefinierten Komponente und wie man den Wert zurück mit dem Ereignis erhalten. Wenn es haupt möglich ist ...

Die Select Komponente sieht wie folgt aus:

type SelectProps = { 
    select: { 
    value: any 
    options: { 
     [k: string]: any 
    } 
    } 
} 

type SelectState = { 
    show: boolean 
} 

class Select extends Component<SelectProps, SelectState> { 
    constructor(props: SelectProps) { 
    super(props) 
    this.state = { 
     show: false 
    } 
    } 
    label = (v: any): string | undefined => { 
    for (var k in this.props.select.options) { 
     if (this.props.select.options[k] === v) return k 
    } 
    } 
    change = (i: number) => { 
    this.setState({ show: false }) 
    this.props.select.value = this.props.select.options[this.keys[i]] 
    } 
    display =() => { 
    this.setState({ show: !this.state.show }) 
    } 
    keys = Object.keys(this.props.select.options) 
    render() { 
    let { show } = this.state 
    let { options, value } = this.props.select 
    return (
     <div className='select'> 
     <button onClick={this.display}>{this.label(value)}</button> 
     {!show ? null : 
      <ul> 
      {this.keys.map((e: string, i: number) => (
       <li key={i} onClick={() => this.change(i)}>{e}</li>) 
      )} 
      </ul> 
     } 
     </div> 
    ) 
    } 
} 

Es funktioniert wie erwartet. Ich kann es stylen (hurra!).

Ich bekomme den ausgewählten Wert von Wert Parameter. Ich wundere mich aber, wenn ich es mit onChange Ereignis bekommen kann? Es verhält sich also eher wie Native Select.

P.S.

Dies ist Styling davon (Stylus), es benötigt, falls

.select 
    display: inline-block 
    position: relative 
    background: white 
    button 
    border: .1rem solid black 
    min-width: 4rem 
    min-height: 1.3rem 
    ul 
    position: absolute 
    top: 100% 
    border: .1rem solid black 
    border-top: 0 
    z-index: 100 
    width: 100% 
    background: inherit 
    li 
     text-align: center 
     &:hover 
     cursor: pointer 
     background: grey 

Dank

Answer 1

Als Teil der Requisiten, in einer Änderung Rückruf übergeben. In change, den Rückruf aufrufen und den neuen Wert übergeben:

type SelectProps = { 
    select: { 
    onChange: any, // change callback 
    value: any, 
    options: { 
     [k: string]: any 
    } 
    } 
} 

... 
... 

change = (i: number) => { 
    this.setState({ show: false }) 
    this.props.select.value = this.props.select.options[this.keys[i]] 
    this.props.select.onChange(this.props.select.value); // call it 
} 

Dann können Sie Ihre Änderung Rückruf übergeben, wenn die Ausgabe:

let s = { 
    value: '2', 
    options: { 
     '1' : 'one', 
     '2' : 'two' 
    }, 
    onChange : function(val){ 
     console.log("change to " + val); 
    } 
}; 

return (
    <Select select={s} /> 
);