我是react js的新手。在这里,我有一个类似于->
的以下组件A='a b c'
在 <HighRow technologies={this.state.technologies} onChange={this.onchange.bind(this)} data={data} key={data.id} onAddRow={this.onaddRow.bind(this)} onRemoveRow={this.onRemoveRow.bind(this)} />
onchange(event, tobeupdated, id) {
const newData = this.props.lowData;
if (newData !== undefined) {
return newData.High.map((object, index) => {
if (object.id === id) {
object[tobeupdated] = event.target.value;
}
this.props.updateHighLevel(newData.High);
});
}
}
HighROW.js
我创建了一个单独的Select命名组件,例如>
<div className="rowContent fontStyle borderRight">
<label type="text">Select Technology</label>
<select className="selectpicker btn btn-labeled btn-start selectId techDrop margin-left-10" onChange={(e) => { props.onChange(e, "technology", props.data.id) }}>
<option disabled selected value>None Selected</option>
{props.technologies && <Select techData={props.technologies} options={props.technology} />}
</select>
</div>
所以,现在在这里,我正在做的是,我有一个类似于>
的对象import React from 'react';
class CreateSelectOption extends React.Component {
constructor(props) {
super(props);
console.log("onchanmge", props);
this.state = {
technologies: this.props.techData,
selected:this.props.options
}
}
componentWillReceiveProps(newProps) {
if (newProps.techData.length > 0) {
this.setState({
technologies: newProps.techData
})
}
}
render() {
return this.state.technologies.map((item) =>
<option key={item.id} value={this.state.selected} >{item.name}</option>
);
}
}
export default CreateSelectOption;
在这里,我从api请求中获取的所有技术数据,然后将它们存储在状态中,然后在select选项中显示它们。因此,我无法理解在服务器数据中使用select选项的方式,有人可以帮助我吗?