我想要 React Hook 级联 select 选项
i want react hook cascading select option
代码:
import React, { useState } from 'react';
const lookup = {
"num": [
{ id: '1', text: '1' },
{ id: '2', text: '2' },
{ id: '3', text: '3' },
{ id: '4', text: '4' },
{ id: '5', text: '5' }
],
"en": [
{ id: 'a', text: 'a' },
{ id: 'b', text: 'b' },
{ id: 'c', text: 'c' },
{ id: 'd', text: 'd' },
{ id: 'e', text: 'e' }
]
}
const App = ({}) => {
this.setState()
const [ data ] = useState('num');
const { data } = this.state;
const options = lookup[data];
return (
<div>
<select onChange = {({ target: { value } }) => {this.setState({ data: value })}}>
<option value="num">Integers</option>
<option value="en">Alphabets</option>
</select>
<hr />
<select>
{options.map(a => <option key={a.id} value={a.id}>{a.text}</option>)}
</select>
</div>
);
}
export default App;
错误:
Failed to compile
./src/App.js
Line 30:11: Parsing error: Identifier 'data' has already been declared
28 | const [ data ] = useState('num');
29 |
> 30 | const { data } = this.state;
| ^
31 |
32 |
33 | const options = lookup[data];
从 class 组件更改为函数组件时出错。我英文不好 我想要级联 select 选项 运行 时出现编译错误 我还是初学者,所以我不知道哪里错了 我该如何解决
我想要一个功能组件,而不是 class 组件
由于您要转换为功能组件,因此无需使用 this.state
。
useState 挂钩 returns 一个元组,其中第一个元素是状态,第二个元素是该状态的 setter。
所以在你的情况下你可以这样使用:
const [ data, setData ] = useState('num');
现在从 onChange 回调中调用 setData。
<select onChange = {({ target: { value } }) => {setData(value);}}>
这将更新 data
状态并重新呈现组件。
代码:
import React, { useState } from 'react';
const lookup = {
"num": [
{ id: '1', text: '1' },
{ id: '2', text: '2' },
{ id: '3', text: '3' },
{ id: '4', text: '4' },
{ id: '5', text: '5' }
],
"en": [
{ id: 'a', text: 'a' },
{ id: 'b', text: 'b' },
{ id: 'c', text: 'c' },
{ id: 'd', text: 'd' },
{ id: 'e', text: 'e' }
]
}
const App = ({}) => {
this.setState()
const [ data ] = useState('num');
const { data } = this.state;
const options = lookup[data];
return (
<div>
<select onChange = {({ target: { value } }) => {this.setState({ data: value })}}>
<option value="num">Integers</option>
<option value="en">Alphabets</option>
</select>
<hr />
<select>
{options.map(a => <option key={a.id} value={a.id}>{a.text}</option>)}
</select>
</div>
);
}
export default App;
错误:
Failed to compile
./src/App.js
Line 30:11: Parsing error: Identifier 'data' has already been declared
28 | const [ data ] = useState('num');
29 |
> 30 | const { data } = this.state;
| ^
31 |
32 |
33 | const options = lookup[data];
从 class 组件更改为函数组件时出错。我英文不好 我想要级联 select 选项 运行 时出现编译错误 我还是初学者,所以我不知道哪里错了 我该如何解决 我想要一个功能组件,而不是 class 组件
由于您要转换为功能组件,因此无需使用 this.state
。
useState 挂钩 returns 一个元组,其中第一个元素是状态,第二个元素是该状态的 setter。
所以在你的情况下你可以这样使用:
const [ data, setData ] = useState('num');
现在从 onChange 回调中调用 setData。
<select onChange = {({ target: { value } }) => {setData(value);}}>
这将更新 data
状态并重新呈现组件。