Question

我正在填充选择列表，并从同一json绘制相应的信息组件。选择是通过.map和所有正确的值设置的。（我认为）。将onChange分配给countryChange，它接受事件值和setStates传递给触发器。

我不明白的是， 1. e.target.value是一个字符串而不是数字， 2.当状态分配为0时，e.target.value和状态返回不同的值...

this.state={
 selectedCountry:0
}



      countryChange( e ) {
            const list = e.target.value;
            const countrylist = this.props.countries.find(c => c.id === list)
              this.setState({
                    selectedCountry: countrylist
                   // selectedCountry: parseInt(e.target.value, 10) 
                });
            }
        render() {
                    return(
                      <select id="exampleSelect" onChange={this.countryChange.bind(this)}>
                      <option value="d">Select Country</option>
                     {this.props.countries.map((item) => ( <option key={item.id} value={item.id}> { item.name } </option> ))}</select>

之后，我将selectedCountry作为道具发送给其他组件以呈现信息。我一直在寻找其他类似的问题和答案，到现在为止，但是似乎无法按照我想要的方式完全执行它。

Answer 1

对于HTML <option>元素，value属性被浏览器解释为字符串。（HTML specifications将其描述为类型DOMString。）似乎您已经想过，如果希望将其转换为数字，则需要将其转换为数字，但我想您已经完成了使您的比较工作有些晚。怎么样

const list = parseInt(e.target.value);

将

用作countryChange的第一行？

或者，您可以只进行所有比较字符串比较。您可能希望将.id属性设置为字符串，并希望将初始setState设置为{selectedCountry: "0"}。

反应输入选择以显示相应的组件并选择字符串值到数字值

1 个答案: