大佬教程收集整理的这篇文章主要介绍了将选定的选项传递给父组件 - 反应，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我目前正在将道具中的选择选项传递给来自父选项的子组件，但是在将选择值传递回父组件时我一直在努力，这就是我所拥有的：
class ResultModel extends Component {
constructor(props) {
super(props);
this.state = {
brands: ['BMW','Mercedes','Chevrolet','Nissan'],};
}
render() {
return (
<div>
<div classname="cars-result-content__filters">
<WebFilter
brand={this.state.brands}
/>
</div>
</div>
)
}
}
在孩子中：
const handleChange = (event) => {
console.log('selected-brand',event.target.value)
};
function WebFilter(props) {
const {brand} = props;
return (
<div classname="filter-web-section">
<Form.Group controlID="exampleForm.ControlSelect1">
<Form.Control onChange={handleChange} as="select">
{brand.map((item) => (
<option value ={item.value}>{item}</option>
))}
</Form.Control>
</Form.Group>
</div>
)
}
如何将列表中的选定值发送回父级？提前感谢您的任何提示或帮助。
您可以创建一个函数来更新父级的状态并将该函数传递给子级，子级可以通过 onChange 组件的 Form 调用该函数：
import { Component } from "react";
import { Form } from "react-bootstrap";
class ResultModel extends Component {
constructor(props) {
super(props);
this.state = {
brands: ["BMW","Mercedes","Chevrolet","Nissan"],selectedBrand: ""
};
this.handleSelectedBrand = this.handleSelectedBrand.bind(this);
}
handleSelectedBrand(e) {
console.log(e.target.value); // Selected brand
this.setState({ selectedBrand: e.target.value });
}
render() {
return (
<div>
<div className="cars-result-content__filters">
<WebFilter
brand={this.state.brands}
handleSelectedBrand={this.handleSelectedBrand}
/>
</div>
</div>
);
}
}
function WebFilter(props) {
const { brand,handleSelectedBrand } = props;
return (
<div className="filter-web-section">
<Form.Group controlId="exampleForm.ControlSelect1">
<Form.Control as="select" onChange={handleSelectedBrand}>
{brand.map((item,key) => (
<option key={key}>{item}</option>
))}
</Form.Control>
</Form.Group>
</div>
);
}
Sandbox Example
,一般来说，props 是从父级传递给子级的。要向另一个方向进行通信，您必须使用回调和事件。喜欢：
import { useCallback } from "react";
export default function App() {
return (
<Select
optionData={[
{ value: "0",text: "first option" },{ value: "1",text: "second option" }
]}
// hnadle selecting a different option
onChange={(data) => console.log(data)}
/>
);
}
// Creates a function to handle the change event dispatched by the select element
const createChangeHandler = callback => event => {
if (typeof callback === "function") {
const select = event.target;
const selectedIndex = select.selectedIndex;
const selectedOption = select.options[selectedIndex];
const value = selectedOption.value;
const text = selectedOption.innerText;
callback({ value,text });
}
};
function Select(props) {
const { optionData,onChange: _onChange } = props;
// onChange will be called when the select dispatches a change event
const onChange = useCallback(createChangeHandler(_onChange),[_onChange]);
return (
<select onChange={onChange}>
{optionData.map((data) => {
const { value,text } = data;
return (
<option key={value} value={value}>
{text}
</option>
);
})}
</select>
);
}
You can try the code here
以上是大佬教程为你收集整理的将选定的选项传递给父组件 - 反应全部内容，希望文章能够帮你解决将选定的选项传递给父组件 - 反应所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。