为什么我的 'Select' 个 React 组件同步在一起？

Question

我目前正在使用 materialui 创建提交页面。我为页面创建了两个 'Select' 组件，但有一个问题，如果我从第二个 'Select' 组件中选择一个选项，第一个 'Select' 组件中的选项将被刷新。我以为 'onChange' 有问题，但我不知道这个问题的原因。我想 select 'Select' 组件中的所有选项，然后立即提交数据。

此外，有没有办法在第一个 'Select' 组件中输入 'None' 以外的选项之前禁用第二个 'Select' 组件，并在有效选项具有后启用它已输入？

非常感谢您的宝贵时间和帮助！

import React, { Component } from 'react';
import { Form, Field } from 'react-final-form';
import { OnChange } from 'react-final-form-listeners';
import { makeStyles, InputLabel, FormControl, Typography, Paper, Link, Grid, Button, CssBaseline, MenuItem, TextField, Select, Box, FormHelperText} from '@material-ui/core';

const useStyples = makeStyles((theme) => ({
    formControl: {
        margin: theme.spacing(2),
        minWidth: 400
    },

    typo1: {
        padding: 30,
        margin: 'auto',
        maxWidth: 600
    },

    typo2: {
        padding: 0,
        margin: 'auto',
        maxWidth: 600
    },
}))

export default function CreatePage() {

    const classes = useStyples()

    const [value, setValue] = React.useState('')
    
    const handleChange = (event) => {
        setValue(event.target.value)
    }

    return (
        <div>
            <Typography variant='h4' align='center' component='h1' gutterBottom className={classes.typo1}>
                Data Submission Form
            </Typography>
            <Typography variant='h5' align='center' component='h2' gutterBottom className={classes.typo2}>
                Material-UI
            </Typography>
            
            <Box display='flex' flexDirection='row'>
                <Box>
                    <FormControl required variant='filled' className={classes.formControl}>
                        <InputLabel shrink>Defect</InputLabel>
                        <Select
                            labelId='defect-select1'
                            id='defect-select1'
                            value={value}
                            displayEmpty
                            onChange={handleChange}>

                        <MenuItem value=''>None</MenuItem>
                        <MenuItem value={'Crack'}>Crack</MenuItem>
                        <MenuItem value={'Scratch'}>Scratch</MenuItem>
                        <MenuItem value={'Rough Surface'}>Rough Surface</MenuItem>
                        <MenuItem value={'Spalling'}>Spalling</MenuItem>
                        </Select>
                        <FormHelperText>Select Defect for Position 1 - Required</FormHelperText>
                    </FormControl>
                </Box>
                <Box>
                    <FormControl required variant='filled' className={classes.formControl}>
                        <InputLabel shrink>Tool</InputLabel>
                        <Select
                            labelId='tool1'
                            id='tool1'
                            displayEmpty
                            value={value}
                            onChange={handleChange}>

                        <MenuItem value=''>None</MenuItem>
                        <MenuItem value={'Tool 1'}>Tool 1</MenuItem>
                        <MenuItem value={'Tool 2'}>Tool 2</MenuItem>
                        <MenuItem value={'Tool 3'}>Tool 3</MenuItem>
                        <MenuItem value={'Tool 4'}>Tool 4</MenuItem>
                        </Select>
                        <FormHelperText>Select Tool Decision for Position 1 - Required</FormHelperText>
                    </FormControl>
                </Box>
            </Box>
        </div>
    );    
}

如果有人能告诉我问题的根本原因，我会很高兴。为我的问题添加一个解决方案会更好！

Answer 1

嗯，看来你只有 1 个值:

const [value, setValue] = React.useState('')

虽然您复制了 <Select /> 组件，但您没有复制值...

您需要第二个“值”和第二个 handleChange 来更新第二个值

const [value2, setValue2] = React.useState('');

const handleChange2 = (event) => {
   setValue2(event.target.value)
}

为什么我的 'Select' 个 React 组件同步在一起？

Why my 'Select' components in react are synchronized together?

reactjs

user-interface

material-ui

frontend