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);
});

组件中的输入未正确更新

1 个答案: