使用react-jsonschema-forms创建典型的国家/省(州)依赖下拉列表可以通过以下步骤实现:
npm install react react-dom
npm install @rjsf/core @rjsf/material-ui
import React from 'react';
import Form from '@rjsf/core';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
const countries = [
{ value: 'usa', label: 'United States' },
{ value: 'canada', label: 'Canada' },
// 其他国家...
];
const states = {
usa: [
{ value: 'ny', label: 'New York' },
{ value: 'ca', label: 'California' },
// 其他州...
],
canada: [
{ value: 'on', label: 'Ontario' },
{ value: 'bc', label: 'British Columbia' },
// 其他省份...
],
// 其他国家的省(州)...
};
ui:widget
属性来自定义下拉列表的外观和行为:const schema = {
type: 'object',
properties: {
country: { type: 'string', title: 'Country' },
state: { type: 'string', title: 'State' },
},
};
const uiSchema = {
country: {
'ui:widget': (props) => (
<FormControl>
<InputLabel>Country</InputLabel>
<Select
value={props.value}
onChange={(event) => props.onChange(event.target.value)}
>
{countries.map((country) => (
<MenuItem key={country.value} value={country.value}>
{country.label}
</MenuItem>
))}
</Select>
</FormControl>
),
},
state: {
'ui:widget': (props) => (
<FormControl>
<InputLabel>State</InputLabel>
<Select
value={props.value}
onChange={(event) => props.onChange(event.target.value)}
>
{states[props.formData.country].map((state) => (
<MenuItem key={state.value} value={state.value}>
{state.label}
</MenuItem>
))}
</Select>
</FormControl>
),
},
};
class CountryStateForm extends React.Component {
render() {
const theme = createMuiTheme();
return (
<MuiThemeProvider theme={theme}>
<Form
schema={schema}
uiSchema={uiSchema}
onSubmit={this.props.onSubmit}
/>
</MuiThemeProvider>
);
}
}
class App extends React.Component {
handleSubmit = ({ formData }) => {
// 处理表单提交的数据
console.log(formData);
};
render() {
return (
<div>
<h1>Country/State Form</h1>
<CountryStateForm onSubmit={this.handleSubmit} />
</div>
);
}
}
这样,你就可以使用react-jsonschema-forms创建一个典型的国家/省(州)依赖下拉列表的表单了。根据选择的国家,省(州)的下拉列表会动态更新。
注意:以上代码示例中使用了Material-UI库来创建下拉列表,你也可以使用其他UI库或自定义样式来实现相同的效果。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云