[英]Display radio buttons depending on a constant
I want to display a number of radio buttons that equal the const total_regions.我想显示一些等于 const total_regions 的单选按钮。 I would like to give each one a differnt value.
我想给每个人一个不同的价值。
Eg if total_regions = 5, then five radio buttons are displayed with values 1 - 5.例如,如果 total_regions = 5,则显示五个单选按钮,其值为 1 - 5。
import React from 'react';
const Test = props => {
const total_regions = (JSON.parse(JSON.stringify(props.test)).length); // gets the number of regions
return (
<ul>
{props.test.map(item => {
return <li>{item.length}</li>;
})}
</ul>
);
};
export default Test;
I played around with the props trying to get somewhere but I don't know how to print each button for each entry with a specific value.我玩弄道具试图到达某个地方,但我不知道如何为每个条目打印具有特定值的每个按钮。 Could I turn total_regions into a array and use mapping with it
我可以把 total_regions 变成一个数组并使用它的映射吗
App.js:应用程序.js:
import "bootstrap/dist/css/bootstrap.css";
import React from "react";
import ReactPlayer from 'react-player'
import LeftPane from "./components/LeftPane.js";
import Video from "./components/Video.js";
import Footer from "./components/Footer.js";
import Test from "./components/Test.js";
//import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { apiResponse: [] };
}
// Comunicate with API
callAPI() {
fetch("http://localhost:9000/IntensityAPI") //React app talks to API at this url
.then(res => res.json())
.then(res => this.setState({ apiResponse: res }));
}
componentWillMount() {
this.callAPI();
}
render() {
return (
<div className="App">
<div class="row fixed-top fixed-bottom no-gutters" >
<div class="col-3 fixed-top fixed-bottom">
<LeftPane></LeftPane>
</div>
<div class="offset-md-3 fixed-top fixed-bottom" >
<Video></Video>
</div>
<div class=" col-3 fixed-bottom">
// <Footer test = {this.state.apiResponse}/>
<Test test = {this.state.apiResponse}/>
</div>
</div>
</div>
);
}
}
export default App;
You can use the index
parameter of the array::map function and map to a radio type input您可以使用数组的
index
参数::map function 和 map 到无线电类型输入
{props.test.map((item, index) => {
return (
<label key={index}>
{item}
<input type="radio" value={index} />
</label>
);
})}
You just need to loop over the data and return a radio button for each item in the data, I've made an example sandbox for you to look at.您只需要遍历数据并为数据中的每个项目返回一个单选按钮,我已经制作了一个示例沙箱供您查看。 Hope it helps:)
希望能帮助到你:)
https://codesandbox.io/s/great-water-c0ihx?file=/src/App.js https://codesandbox.io/s/great-water-c0ihx?file=/src/App.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.