Question

export class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "content",
      errorMessage: "this is a required field",
      required: true
    };
  }
  render() {
    const updateValue = val => {
      this.setState({ value: val.target.value });
    };

    const handleClick = () => {
      if (this.state.value.trim() === "") {
        this.setState({ errorMessage: "Cant have leading whitespace" });
      }
    };

    return (
      <div className="App">
        <input
          onChange={updateValue}
          value={this.state.value}
          type="text"
          required={this.state.required}
        />
        {this.state.value.length < 1 ? (
          <div>{this.state.errorMessage}</div>
        ) : null}
        <button onClick={handleClick}>OK</button>
      </div>
    );
  }
}

如果输入为空，我有上面的组件呈现errorMessage状态。如果用户使用空格填充输入框并点击errorMessage按钮，我也会尝试将此"Cant have leading whitespace"状态更新为OK。

我期望发生的是点击按钮后如下：

  if (this.state.value.trim() === "") {
    this.setState({ errorMessage: "Cant have leading whitespace" });
  }

也就是说，它会检查value状态是否只包含空字符串并相应地更新errorMessage状态。

然而，这个状态并没有像我期望的那样更新。我该如何解决这个问题？谢谢！

我在这里有一个工作演示：https://codesandbox.io/s/2x846p0p5y

Answer 1

你能改变下面的代码吗？

{this.state.value.trim().length < 1 ? (
      <div>{this.state.errorMessage}</div>
 ) : null}

Answer 2

使用正则表达式match(/s+|\s+$/g, "")

 const handleClick = () => {
      var hasSpaces = this.state.value.match(/s+|\s+$/g, "");
        this.setState({ errorMessage: hasSpaces && "Cant have leading whitespace" });
    };

从渲染中删除所有这些条件只需使用纯文本就好像它为空它不会渲染它

<div>{this.state.errorMessage}</div>

但是，如果您也担心尾随空格，请使用此表达式 -

.match(/^\s+|\s+$/g, "")

Answer 3

只需改变你的if条件：

CMD ["sh","-c","/path/within/container/to/your/read_write_test.py >> /shared/out"]

希望这适合你

更新React组件中前导空格的状态

3 个答案: