Question

这有效，但是当我控制台记录它给出的对象时

{ "week":undefined, "name":undefined, "code":undefined }

而且是不是把所有的材质ui组件都包裹在form标签中，把整个代码当成一个form来处理，这样合适吗？这是我的代码：

const ExamSimulatorForm = () => {
    const weekNumber = useRef();
    const examSub = useRef();
    const examCode = useRef();


    const handleSubmit = (event) =>{
        event.preventDefault()
        const week = weekNumber.current.value
        const subject = examSub.current.value
        const code = examCode.current.value

        const examSimulatorPayload = {
            week:week,
            subject:subject,
            code:code
        }
        console.log(examSimulatorPayload)
    }
const [code, setCode] = useState('Quiz');
    const [examSubject, setExamSubject] = useState('');
    const [field, setField] = useState(1)

 

 
  const handleESubjectChange = (event) => {
    setExamSubject(event.target.value);
  };

  const handleCode = (event) => {
    setCode(event.target.value);
  };




    return (
        <form >
        <CardActions onSubmit={handleSubmit}>
            
            <Grid container spacing={2} justifyContent='center' alignItems='center' direction='column'>
            <Grid item>
                <TextField 
                 InputProps={{
                    inputProps: { 
                        max: 12, min: 1 
                    }
                }}
                label='Week'
                type='number'
                onChange={(event)=>setField(parseInt(event.target.value))}
                style={{minWidth:250}}
                ref = {weekNumber}
                required
                  />
                
                </Grid>
                <Grid item>
                <FormControl style={{minWidth:250}}>
                    <InputLabel>Subject</InputLabel>
                        <Select
                            value={examSubject}
                            onChange={handleESubjectChange}
                            ref={examSub}
                            required
                            >
                            <MenuItem value={10}>Ten</MenuItem>
                            <MenuItem value={20}>Twenty</MenuItem>
                            <MenuItem value={30}>Thirty</MenuItem>
                            </Select>
                </FormControl>
                </Grid>
                <Grid item>
                <FormControl style={{minWidth:250}}>
                    <InputLabel id="exam-code" >Exam Code</InputLabel>
                        <Select
                           labelId="exam-code"
                             id="exam-code-select"
                            value={code}
                            onChange={handleCode}
                            ref={examCode}
                            required
                            >
                            <MenuItem value={'Q'}>Q</MenuItem>
                            <MenuItem value={'M'}>M</MenuItem>
                            <MenuItem value={'F'}>F</MenuItem>
                            </Select>
                </FormControl>
                </Grid>
                <Grid item>
                    <Button variant='contained' color='primary' style={{marginTop:94}} >Take Exam</Button>
                </Grid>       
            </Grid>
        </CardActions>
        </form>
     
    )
}



export default ExamSimulatorForm;

我有一个类似的表格用于考勤模拟、考勤数据集生成和考试数据集生成

Answer 1

我认为这对你有好处。请试试这个。

const ExamSimulatorForm = () => {

    const [state, setState] = useState({
       code: 'Quiz',
       subject: '',
       week: 1
    });

    const handleSubmit = (event) =>{
        event.preventDefault()

        const examSimulatorPayload = state;

        console.log(examSimulatorPayload)
    }

    const handleChange = (evt, name) {
        const { value } = evt.target;
        setState({
            ...state,
            [name]: value
        });
    }

    return (
        <form onSubmit={handleSubmit}>
        <CardActions>
            <Grid container spacing={2} justifyContent='center' 
              alignItems='center' direction='column'>
            <Grid item>
                <TextField 
                 InputProps={{
                    inputProps: { 
                        max: 12, min: 1 
                    }
                }}
                label='Week'
                type='number'
                value={state.week}
                onChange={(event)=>handleChange( event, "week")}
                style={{minWidth:250}}
                required
                  />
                
                </Grid>
                <Grid item>
                <FormControl style={{minWidth:250}}>
                    <InputLabel>Subject</InputLabel>
                        <Select
                            value={state.subject}
                            onChange={(event)=>handleChange( event, "subject")}
                            required
                            >
                            <MenuItem value={10}>Ten</MenuItem>
                            <MenuItem value={20}>Twenty</MenuItem>
                            <MenuItem value={30}>Thirty</MenuItem>
                            </Select>
                </FormControl>
                </Grid>
                <Grid item>
                <FormControl style={{minWidth:250}}>
                    <InputLabel id="exam-code" >Exam Code</InputLabel>
                        <Select
                           labelId="exam-code"
                             id="exam-code-select"
                            value={state.code}
                            onChange={(event)=>handleChange( event, "code")}
                            required
                            >
                            <MenuItem value={'Q'}>Q</MenuItem>
                            <MenuItem value={'M'}>M</MenuItem>
                            <MenuItem value={'F'}>F</MenuItem>
                            </Select>
                </FormControl>
                </Grid>
                <Grid item>
                    <Button variant='contained' color='primary' style= 
                      {{marginTop:94}} >Take Exam</Button>
                </Grid>       
            </Grid>
        </CardActions>
        </form>
     
    )
}



export default ExamSimulatorForm;

请检查上面的代码，让我知道你的想法。

Answer 2

react 中的状态更新是异步的，这意味着它们不会在您调用它们时立即发生。你必须等到状态更新到 console.log 否则，什么都没有改变，你会得到初始值。你可以这样做：

useEffect(() => {
        const subject = examSub.current.value
     console.log(subject)
    }, [examSubject])

useEffect() 每次状态改变时都会执行一个动作。注意最后有一个数组，带有 [examSubject]。这表示将触发效果的状态。所以当examSubject改变时（当你给它赋值时），效果就会执行（在这种情况下，它会记录主题）。

在编写代码时，至少在我的情况下，您无需担心这一点。您可以更改状态并照常编写代码，但 react 可能需要一两秒钟来更新状态。我唯一真正注意到这一点的时候是我在 console.log 时。

Answer 3

您可以为输入定义状态：

const markAsCompleted = async (id, isCompleted) => {
  console.log(id);
  await todoRef
    .doc(id)
    .update({
      isComplete: isCompleted,
    })
    .then(() => {
      console.log("mark As Completed Updated!");
    });
};

render(){
    return(
      <View>
          <Button onPress={()=> this.markAsCompleted('123', true)}
      </View>
    )
  }

如果您想处理来自单个事件的数据并定义其初始状态，请尝试以下方法：

  const [code, setCode] = React.useState('');
  const [subject, setSubject] = React.useState('');
  const [week, setWeek] = React.useState('');

 const setExamCode = event => {
    setCode(event.target.value);
  };

 const setSubject = event => {
     setSubject(event.target.value);
  };

 const setWeek = event => {
    setWeek(event.target.value);
  };

Then call these methods from onChange event like : onChange={setExamCode} or {setSubject}

然后从 onChange 事件中调用这些方法，例如 onChange={handleSubmit}

如何获取反应材料 ui 组件中的字段值

3 个答案: