如何将单选按钮的值传递给react中的组件

Question

我不知道如何将选中的单选按钮的值传递给React中的另一个组件。我现在正在摆弄星球大战的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;
}
`;

Answer 1

您正在传递一个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;
}
}
`;

在两个地方保持单选按钮的状态可能会有点混乱，所以考虑将状态管理完全移动到SearchItem