Javascript 实现类反应

各位编码朋友好,

我有个小问题。首先，我是一个非常新的反应和打字脚本，否则我认为这将是没有问题的解决自己。但我需要将以下代码实现为一个类（否则我需要复制此代码）：

---

非常感谢您的帮助。

以下是上述功能组件的简单类组件：

从“React”导入React；
接口列定义{
表格数据：{
身份证号码
}
}
界面道具{
columnDef:columnDef
onFilterChanged:（上一个：编号，下一个：编号）=>void
}
界面状态{
selectedVal:number
}
类CustomFilterComponent扩展了React.Component{
状态={
selectedVal:0，
}
handleChange=e=>{
const val=e.target.value；
这个.setState（val）；
this.props.onFilterChanged（this.props.columnDef.tableData.id，val）；
}
render（）{
返回(
滤器
{/*什么是phpVersions？*/}
{phpVersions.map（（phpVersion）：ReactElement=>{
返回(
{phpVersion}
)
})}
);
}
}

---

注意：我还评论了phpVersions的来源？如果这是

props

的一部分，只需简单地更改为：

this.props.phpVersions

，那么将上述功能组件转换为类组件实际上需要什么？是的。但我目前的知识还不够，我放弃了基本的youphp转换版本实际上只是一个数组。但是它没有在props.this.props.onFilterChanged（this.props.columnDef.tableData.id，val）中定义；-这条线不适合我。我得到以下错误：“onFilterChanged在类型上不存在…”。啊，我忘了你在使用Typescript？如果是这样，我们必须定义props/state作为typing传递给组件我将答案切换为Typescript styleBTW我不知道为什么要将呈现

phpVersions

的逻辑放在这个组件中，因为这个属性不属于组件。不过，您可能需要再次检查。

const CustomFilterComponent = (props): ReactElement => {
const [selectedVal, setSelectedVal] = useState(0);

function handleChange(e): void {
    const val = e.target.value;
    setSelectedVal(val);
    props.onFilterChanged(props.columnDef.tableData.id, val);
}

return (
    <th>
        <Select  value={selectedVal} onChange={handleChange}>
            <MenuItem value={"0"} disabled>
                Filter
            </MenuItem>
            {phpVersions.map((phpVersion): ReactElement => {
                return (
                    <MenuItem value={phpVersion}>{phpVersion}</MenuItem>
                )
            })}
        </Select>
    </th>
);
};

const newColumns = [...this.state.columns];
newColumns[3].filterComponent = CustomFilterComponent;
this.setState({columns: newColumns});