javascript - 组件中的输入未正确更新

Question

我有一个将被多次使用的组件。它基本上是代表两个宽度和高度尺寸的输入。

他们现在发生了一些事情。当我开始输入它们时，当它们都是空时，最后一个字符不会被记录。如果我输入:

1234 x 1234

当我刷新输入时显示:

1234 x 123

然后，如果我编辑其中一个输入，另一个将变为空白。

这是我的代码:

import React from 'react';

// Shared Components
import { FlexRow } from 'components/shared/Flexbox';
import { TextInput } from 'components/shared/TextInput';

export class RenderDimensionsInput extends React.Component {
  state = {
    readOnly: '',
    width: null,
    height: null
  };

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

    console.log('this.state.height', this.state.height);
    console.log('this.state.width', this.state.width);

    this.props.onChange(this.state.height, this.state.width);
  };

  render() {
    return (
      <div>
        <FlexRow>
          <TextInput
            label={this.props.label}
            style={{ width: '135px', marginRight: '10px' }}
            defaultValue={this.props.values.width}
            name="width"
            // onChange={this.props.onChange}
            onChange={e => this.handleChange(e)}
          />
          <span>x</span>
          <TextInput
            style={{ width: '135px', marginLeft: '10px' }}
            defaultValue={this.props.values.height}
            name="height"
            // onChange={this.props.onChange}
            onChange={e => this.handleChange(e)}
          />
        </FlexRow>
      </div>
    );
  }
}




export class TextInput extends React.Component {
  state = {
    readOnly: '',
  };

  render() {
    return (
      <FlexColumn
        style={{
          alignItems: 'baseline',
          paddingBottom: s[3],
        }}>
        <Input
          {...this.props}
          type={this.props.type || 'text'}
          defaultValue={this.props.defaultValue}
          onChange={this.props.onChange}
          readOnly={this.state.readOnly}
        />
        <Label>{this.props.label}</Label>
      </FlexColumn>
    );
  }
}

Answer 1

您在设置状态后直接使用来自 state 的值，但 setState 是 async 这意味着无法保证此时您使用的是最新的值state 中:this.props.onChange(this.state.height, this.state.width);

所以最好这样使用它:

this.setState({ [e.target.name]: e.target.value }, () => {
  this.props.onChange(this.state.height, this.state.width);
});