Question

累了Firefox的丑陋选择而且无法设计它。我以为我会在React做一个学习目的。

它似乎很容易实现，但我无法弄清楚如何使用自定义组件执行onChange以及如何通过事件获取值。如果可能的话......

Select组件如下所示：

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

它按预期工作。我可以设计它（万岁！）。

我从value参数中获取所选值。我想知道我是否可以通过onChange事件得到它？所以它的行为更像是原生选择。

P.S。

这是它的样式（在手写笔中），如果需要的话

.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

由于

Answer 1

作为道具的一部分，传递更改回调。在change中，调用回调并传入新值：

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
}

然后您可以在输出时传递更改回调：

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

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

React：自定义选择元素

1 个答案: