所以我有一个下拉组件:
import React from 'react';
import { PropTypes } from 'prop-types';
export default class Dropdown extends React.Component {
constructor(props) {
super(props);
this.state = {
value: this.props.selectedDropdownValue,
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({
value: e.target.value,
});
this.props.onChange(e.target.value);
}
render() {
let disabled = false;
let dropdownOptions = null;
const { options } = this.props;
// Disable dropdown is the disabled attribute is added
if (options) {
dropdownOptions = this.props.options.map((option) =>
<option value={option.key} key={option.key} >{option.display}</option>,
);
} else {
// Setting default options
const defaultOptions = [
{ key: '', display: 'Please configure defaultOptions' },
];
disabled = true;
dropdownOptions = defaultOptions.map((option) =>
<option value={option.key} key={option.key} >{option.display}</option>,
);
}
return (
<select
value={this.state.value}
onChange={this.handleChange}
disabled={disabled}
>
{ dropdownOptions }
</select>
);
}
}
Dropdown.propTypes = {
options: PropTypes.arrayOf(PropTypes.object),
onChange: PropTypes.func,
selectedDropdownValue: PropTypes.string,
};
Dropdown.defaultProps = {
options: undefined,
onChange: this.handleChange,
selectedDropdownValue: '',
};
以下是我在视图中呈现下拉列表的方式:
import React from 'react';
import { PropTypes } from 'prop-types';
import Dropdown from 'components/Dropdown';
class Anish extends React.Component {
render() {
return (
<div>
<div>
Value Selected: {this.props.selectedDropdownValue}
</div>
<label htmlFor={'dropdownId1'}>Sort by: </label>
<Dropdown
id="dropdownId1"
options={[
{ key: '', display: 'Please select a value' },
{ key: 'NJ', display: 'New Jersey' },
{ key: 'NY', display: 'New York' },
]}
onChange={this.props.onSetDropdownValue}
/>
</div>
);
}
}
Anish.propTypes = {
selectedDropdownValue: PropTypes.string,
onSetDropdownValue: PropTypes.func.isRequired,
};
Anish.defaultProps = {
selectedDropdownValue: '',
};
export default Anish;
下面是如何在浏览器中呈现下拉列表和标签:
那么如何将<Dropdown />
上的ID应用到其中的<select>
?
感谢任何帮助。
答案 0 :(得分:3)
props
将包含Dropdown
组件中的ID,但由于您在React组件中使用this.props
。
return (
<select
id={this.props.id}
value={this.state.value}
onChange={this.handleChange}
disabled={disabled}
>
{dropdownOptions}
</select>
)
答案 1 :(得分:1)
您应该在if / else中添加id = {option.id},并在返回时添加。注意:在您的Anish课程中,您传递的是id =&#34; dropdownId1&#34;作为道具。不确定是否有意。
if (options) {
dropdownOptions = this.props.options.map((option) =>
<option value={option.key} id={option.id} key={option.key} >{option.display}</option>,
);
} else {
// Setting default options
const defaultOptions = [
{ key: '', display: 'Please configure defaultOptions' },
];
disabled = true;
dropdownOptions = defaultOptions.map((option) =>
<option id={option.id} value={option.key} key={option.key} >{option.display}</option>,
);
}
return (
<select
value={this.state.value}
onChange={this.handleChange}
disabled={disabled}
id={option.id}
>
{ dropdownOptions }
</select>
);
//不要忘记将id添加到propTypes
id: React.PropTypes.string,