Reactjs 如何访问组件字段-React JS

我从“react select”导入的下拉组件没有什么问题，我是react的新手，所以我很难解决这个问题。我只想从下拉列表中选择用户，我怎么做

例如，这是下拉组件：

import React from 'react';
import Select from 'react-select';
import 'bootstrap/dist/css/bootstrap.min.css';

const techCompanies = [
  { label: "Button", value: 1 },
  { label: "CheckBox", value: 2 },
  { label: "Color", value: 3 },
  { label: "Date", value: 4 },
  { label: "Local Date time", value: 5 },
  { label: "Email", value: 6 },
  { label: "File", value: 7 },
  { label: "Hidden", value: 8 },
  { label: "Image", value: 9 },
  { label: "Month", value: 10 },
  { label: "Number", value: 11},
  { label: "Password", value: 12},
  { label: "Radio", value: 13},
  { label: "Range", value: 14},
  { label: "Reset", value: 15},
  { label: "Search", value: 16},
  { label: "Submit", value: 17},
  { label: "Telephone", value: 18},
  { label: "Text", value: 19},
  { label: "Time", value: 20},
  { label: "URL", value: 21},
  { label: "Week", value: 22},
];
class DropDown extends React.Component{
    render(){
    return(
  <div className="container">
    <div className="row">
      <div className="col-md-4"></div>
      <div className="col-md-4">
        <Select 
      options={ techCompanies } />
      </div>
      <div className="col-md-4"></div>
    </div>
  </div>
);
}
}
export default DropDown

从“React”导入React；
从“反应选择”导入选择；
导入'bootstrap/dist/css/bootstrap.min.css'；
康斯特科技公司=[
{标签：“按钮”，值：1}，
{标签：“复选框”，值：2}，
{标签：“颜色”，值：3}，
{标签：“日期”，值：4}，
{标签：“本地日期时间”，值：5}，
{标签：“电子邮件”，值：6}，
{标签：“文件”，值：7}，
{标签：“隐藏”，值：8}，
{标签：“图像”，值：9}，
{标签：“月”，值：10}，
{标签：“数字”，值：11}，
{标签：“密码”，值：12}，
{标签：“无线电”，值：13}，
{标签：“范围”，值：14}，
{标签：“重置”，值：15}，
{标签：“搜索”，值：16}，
{标签：“提交”，值：17}，
{标签：“电话”，值：18}，
{标签：“文本”，值：19}，
{标签：“时间”，值：20}，
{标签：“URL”，值：21}，
{标签：“周”，值：22}，
];
类下拉列表扩展了React.Component{
render（）{
返回(
);
}
}
导出默认下拉列表

现在我想在App.js上使用我的下拉列表，并在

{userSelect}

中显示用户选择，我找不到使用pros ans state的方法，所以我被困在这里：

class App extends Component {
  render() {
    return(
    <div>
    <DropDown/>
    </div>

  );
}
}

类应用程序扩展组件{
render（）{
返回(
);
}
}

---

感谢您的帮助

您必须为下拉列表提供一种更改状态的方法。react select提供了一个名为

onChange

的方法，该方法在每次选择新元素时触发所选元素。为了做到这一点，您需要跟踪应用程序组件中当前选定的用户输入，并且您需要将一个函数向下传递到下拉列表，以便每当选择新的下拉列表元素时，应用程序都可以更改状态。您可以将代码更新为以下内容以实现此目的：

//DropDown.jsx
类下拉列表扩展了React.Component{
render（）{
返回(
//将从应用程序传递的onChange prop添加到Select的onChange API方法中
);
}
}
导出默认下拉列表；

//App.jsx
从“React”导入React，{Component}；
从“/DropDown”导入下拉列表；
导入“/styles.css”；
类应用程序扩展组件{
//您需要跟踪当前选定的输入
状态={
用户选择：“
};
setSelected=selected=>{
console.log（选中）//ex:{label:“Button”，值：1}
this.setState（{userSelected:selected.label}）；
};
render（）{
返回(
{this.state.selected}
//传递onChange处理程序
);
}
}
导出默认应用程序；

您必须为下拉列表提供一种更改状态的方法。react select提供了一个名为

onChange

的方法，该方法在每次选择新元素时触发所选元素。为了做到这一点，您需要跟踪应用程序组件中当前选定的用户输入，并且您需要将一个函数向下传递到下拉列表，以便每当选择新的下拉列表元素时，应用程序都可以更改状态。您可以将代码更新为以下内容以实现此目的：

//DropDown.jsx
类下拉列表扩展了React.Component{
render（）{
返回(
//将从应用程序传递的onChange prop添加到Select的onChange API方法中
);
}
}
导出默认下拉列表；

//App.jsx
从“React”导入React，{Component}；
从“/DropDown”导入下拉列表；
导入“/styles.css”；
类应用程序扩展组件{
//您需要跟踪当前选定的输入
状态={
用户选择：“
};
setSelected=selected=>{
console.log（选中）//ex:{label:“Button”，值：1}
this.setState（{userSelected:selected.label}）；
};
render（）{
返回(
{this.state.selected}
//传递onChange处理程序
);
}
}
导出默认应用程序；

就像@Keith所说的，传递一个

道具

处理程序，该处理程序更新父对象（应用程序）的状态，并在子对象的选择更改时执行（下拉列表）

React Select

在选择更改时返回一个对象，因此您必须提取出

标签值

对

我在这里使用React钩子，因为钩子很神奇：）

---

DropDown.js组件

从“React”导入React；
从“反应选择”导入选择；
导入“bootstrap/dist/css/bootstrap.min.css”；
康斯特科技公司=[
{标签：“按钮”，值：1}，
{标签：“复选框”，值：2}，
{标签：“颜色”，值：3}，
{标签：“日期”，值：4}，
{标签：“本地日期时间”，值：5}，
{标签：“电子邮件”，值：6}，
{标签：“文件”，值：7}，
{标签：“隐藏”，值：8}，
{标签：“图像”，值：9}，
{标签：“月”，值：10}，
{标签：“数字”，值：11}，
{标签：“密码”，值：12}，
{标签：“无线电”，值：13}，
{标签：“范围”，值：14}，
{标签：“重置”，值：15}，
{标签：“搜索”，值：16}，
{标签：“提交”，值：17}，
{标签：“电话”，值：18}，
{标签：“文本”，值：19}，
{标签：“时间”，值：20}，
{标签：“URL”，值：21}，
{标签：“周”，值：22}
];
常量下拉列表=（{handleSelectionChange}）=>{
//处理程序跟踪所选内容的更改
常量handleChange=（）=>selectedValue=>{
handleSelectionChange（selectedValue）；//2.请注意，selectedValue位于当前参数中。
};
返回(
);
};
导出默认下拉列表；

召唤