[英]How to pass value of radio button to component in react
我无法理解如何将选定的单选按钮的值传递给 React 中的另一个组件。 我目前正在摆弄 Star Wars API。 尝试构建一个简单的 OPA,用户可以在其中获取有关 SW 宇宙中字符和位置的信息。
用户可以选择他想要的信息类型,例如搜索行星,然后输入所选行星的名称和其他信息。
我正在尝试使用单选按钮和文本输入的组合来构建此功能。
我将文本输入和单选按钮放在两个不同的组件中 - 我如何让它们相互通信 - 或者以另一种方式放置:
如何将一个单选按钮的值传递给另一个组件,后者将其添加到我想要获取的 URL 中?
我的单选按钮组件代码:
import { React, useState } from 'react';
import styled from 'styled-components';
import {
FormControl,
FormControlLabel,
RadioGroup,
Radio,
} from '@material-ui/core';
const ChooseOption = () => {
const [selected, setSelected] = useState('films');
const isButtonSelected = (value) => {
if (selected === value) {
return true;
}
};
const handleChange = (e) => {
setSelected(e.target.value);
};
return (
<Container>
<FormControl component="fieldset">
<RadioGroup
className="radio-group"
row
aria-label="star wars ressource"
name="row-radio-buttons-group"
value={selected}
>
<FormControlLabel
value="films"
control={<Radio />}
label="Films"
checked={isButtonSelected('films')}
onChange={handleChange}
/>
<FormControlLabel
value="people"
control={<Radio />}
label="People"
checked={isButtonSelected('people')}
onChange={handleChange}
/>
<FormControlLabel
value="planets"
control={<Radio />}
label="Planets"
checked={isButtonSelected('planets')}
onChange={handleChange}
/>
<FormControlLabel
value="species"
control={<Radio />}
label="Species"
checked={isButtonSelected('species')}
onChange={handleChange}
/>
<FormControlLabel
value="starships"
control={<Radio />}
label="Starships"
checked={isButtonSelected('starships')}
onChange={handleChange}
/>
<FormControlLabel
value="vehicles"
control={<Radio />}
label="Vehicles"
checked={isButtonSelected('vehicles')}
onChange={handleChange}
/>
</RadioGroup>
</FormControl>
</Container>
);
};
export default ChooseOption;
const Container = styled.div`
text-align: center;
.radio-group {
width: 85%;
margin: auto;
color: white;
}
.MuiFormControlLabel-root {
display: grid;
margin: 1rem 1.5rem;
.MuiButtonBase-root {
background-color: #000;
}
}
`;
我的表单组件代码由单选按钮组件和文本输入组成:
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { baseURL, appendix, routeObject } from '../api';
import { Button } from '@material-ui/core';
import ChooseOption from './ChooseOption';
const SearchItem = () => {
const [search, setSearch] = useState('');
const [selected, setSelected] = useState();
const [data, setData] = useState([]);
const handleChange = (e) => {
setSearch(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
};
const handleRadio = (e) => {
setSelected(e.target.value);
console.log(selected);
};
// const searchForRessource = () => {
// fetch(baseURL + search)
// .then((response) => {
// return response.json();
// })
// .then((data) => console.log(data));
// };
useEffect(() => {
fetch(baseURL)
.then((response) => {
return response.json();
})
.then((data) => setData(data));
}, []);
console.log(data);
return (
<>
<Container>
<form className="input-form" onSubmit={handleSubmit}>
<ChooseOption onChange={handleRadio} />
<input
className="text-input"
type="text"
id="item-input"
onChange={handleChange}
value={search}
/>
</form>
<Button>Search</Button>
</Container>
</>
);
};
export default SearchItem;
const Container = styled.div`
.input-form {
margin: 2rem auto;
text-align: center;
.text-input {
background-color: var(--starWarsYellow);
width: 70%;
border: none;
padding: 0.75rem;
color: #000;
border-radius: 3px;
}
.text-input:focus {
outline: none;
}
}
.MuiButtonBase-root {
background-color: var(--starWarsYellow);
width: 45%;
display: block;
margin: auto;
}
.MuiButtonBase-root:active {
background-color: green;
}
`;
您将一个 onChange 处理程序传递给您的ChooseOption
组件,但从未调用过它。 您可以在SearchItem
组件中保存单选按钮的状态(因为您已经有一个状态对象(已选择),或者您可以在ChooseOption
中添加一个 useEffect 钩子,该钩子在每次您selected
状态在其中更新时调用 onChange(或者更好的是在您的handleChange
函数中:
import { React, useState } from 'react';
import styled from 'styled-components';
import {
FormControl,
FormControlLabel,
RadioGroup,
Radio,
} from '@material-ui/core';
const ChooseOption = ({ onChange }) => { // define the passed onChange handler
const [selected, setSelected] = useState('films');
const isButtonSelected = (value) => {
if (selected === value) {
return true;
}
};
const handleChange = (e) => {
setSelected(e.target.value);
onChange(e); // this fires the onChange handler (handleRadio) you passed in SearchItem
};
return (
<Container>
<FormControl component="fieldset">
<RadioGroup
className="radio-group"
row
aria-label="star wars ressource"
name="row-radio-buttons-group"
value={selected}
>
<FormControlLabel
value="films"
control={<Radio />}
label="Films"
checked={isButtonSelected('films')}
onChange={handleChange}
/>
<FormControlLabel
value="people"
control={<Radio />}
label="People"
checked={isButtonSelected('people')}
onChange={handleChange}
/>
<FormControlLabel
value="planets"
control={<Radio />}
label="Planets"
checked={isButtonSelected('planets')}
onChange={handleChange}
/>
<FormControlLabel
value="species"
control={<Radio />}
label="Species"
checked={isButtonSelected('species')}
onChange={handleChange}
/>
<FormControlLabel
value="starships"
control={<Radio />}
label="Starships"
checked={isButtonSelected('starships')}
onChange={handleChange}
/>
<FormControlLabel
value="vehicles"
control={<Radio />}
label="Vehicles"
checked={isButtonSelected('vehicles')}
onChange={handleChange}
/>
</RadioGroup>
</FormControl>
</Container>
);
};
export default ChooseOption;
const Container = styled.div`
text-align: center;
.radio-group {
width: 85%;
margin: auto;
color: white;
}
.MuiFormControlLabel-root {
display: grid;
margin: 1rem 1.5rem;
.MuiButtonBase-root {
background-color: #000;
}
}
`;
将单选按钮的状态放在 2 个地方可能会有点混乱,因此请考虑将状态管理完全SearchItem
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.