Question

我正在使用语义UI库并做出反应，并在此处按照他们的示例进行表单输入

https://react.semantic-ui.com/collections/form

（btw最底层的那个）

这些表单更新了他们的文本并且我已经过测试，看看状态是否正在更新，他们是！但是，当我想将提交的/宽度，高度，颜色状态设置为其他的时，它不起作用！它在控制台中给我这个警告。

./src/components/Holder/HolderInput.jsx
  Line 33:  'submittedWidth' is assigned a value but never used   no-unused-vars
  Line 34:  'submittedHeight' is assigned a value but never used  no-unused-vars
  Line 35:  'submittedColor' is assigned a value but never used   no-unused-vars

代码

import React, {Component} from 'react';
import {Form} from 'semantic-ui-react';

class HolderInput extends Component {
  state = {
    width: '',
    height: '',
    color: '',
    submittedWidth: '',
    submittedHeight: '',
    submittedColor: ''
  };

  handleChange = (e, {name, value}) => this.setState({[name]: value});

  handleSubmit = () => {
    console.log('Called handleSubmit()');
    const {width, height, color} = this.state;
    console.log('Width Value: ' + width);
    console.log('height Value: ' + height);
    console.log('color Value: ' + color);

    console.log('SubmittedWidth Value: ' + this.state.submittedWidth);

    this.setState({submittedWidth: width, submittedHeight: height, submittedColor: color}),
    () => {
      console.log('SubmittedWidth: ' + this.state.submittedWidth);
      this.setState({width: '', height: '', color: ''});
    }

  }

  render() {
    const {
      width,
      height,
      color,
      submittedWidth,
      submittedHeight,
      submittedColor
    } = this.state;

    return (<Form className='holder-input-form' size={'huge'} inverted="inverted" onSubmit={this.handleSubmit}>

      <Form.Group widths={'equal'}>
        <Form.Input placeholder='45px...' name='height' value={height} onChange={this.handleChange}/>
        <Form.Input placeholder='25px...' name='width' value={width} onChange={this.handleChange}/>
      </Form.Group>

      <Form.Input placeholder='exp. #ffffff or white' name='color' value={color} onChange={this.handleChange}/>

      <Form.Button inverted="inverted" size={'big'} color='violet'>Update It!</Form.Button>
    </Form>);
  }
}

export default HolderInput;

运行这段代码后，它会控制日志的颜色，高度和宽度。然而，它甚至不承认提交的州。它没有返回任何错误，也没有清空输入字段，这表明第一个setState没有完成，但我不知道为什么......

Answer 1

@ cosmichero2025，你的方法是正确的，只有一些错字，请你更改以下部分并进行测试：

    this.setState({submittedWidth: width, submittedHeight: height, submittedColor: color},
  () => {
    console.log('SubmittedWidth: ' + this.state.submittedWidth);
    this.setState({width: '', height: '', color: ''});
  }
)

在handleSubmit之后，React输入字段状态不会更新

1 个答案: