获取 Component 的 key React 的值答案

【问题标题】：Get the value of Component's key React获取 Component 的 key React 的值
【发布时间】：2020-11-20 18:01:12
【问题描述】：

我有一个组件

export class SearchInput extends React.Component {}

这让我选择了一些选项

render() {
    const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
    return (
      <Select
        showSearch
        value={this.props.value}
        placeholder={this.props.placeholder}
        style={this.props.style}
        defaultActiveFirstOption={false}
        showArrow={false}
        filterOption={false}
        onSearch={this.handleSearch}
        onChange={this.props.onChangeValue}
        notFoundContent={null}
      >
        {options}
      </Select>
    );
  }

SearchInput 被导入

class CityForm extends React.Component {}

它基本上作为表单的一部分执行。在我的 CityForm 中，我从 SearchInput 中选择一个城市时，我得到一个值，可以提交该值进行搜索。问题是，该值是城市的名称，例如汉堡、柏林或伦敦。在我的 POST 请求中，我需要这个：

const options = this.state.data.map(d => <Option key={d.value}>

为了让我的 URL 基本上像这样正确构建：

filter?[city_id_eq]=02000000&commit=Search

什么以及如何将Option key={d.value} 传递到我的提取中？

fetch(`filter?q[city_id_eq]=${???}`, {
  method: 'POST'
})
.then(response => response.json())

【问题讨论】：

如果你想从你设置的键中获取值，你应该直接传递另一个道具并从子组件中获取它，我猜你无法获取键的值，或者如果可以的话，这是一个不好的做法。我不确定我是否理解您的问题，但希望对您有所帮助

标签： reactjs react-native

【解决方案1】：

通常一个选项也会有一个值 - 这有效吗？

const options = this.state.data.map(d => <Option key={d.value} value={d.value}>{d.text}</Option>)

【讨论】：

感谢您的回复。我对 React 非常陌生。所以我添加了这个，但我该如何检查？导致此 fetch(filter?q[ags8_id_eq]=${value}) 返回错误 filter?q[ags8_id_eq]=[object%20Object]
你的 onChangeValue 处理程序是什么样的？
当我只是将值添加到选项然后smth时，它以某种方式“自动”通过一些魔法工作。就像我获取的 this.state.value 一样。谢谢！