javascript - 使用逻辑运算符有条件地启用/禁用按钮元素

Question

ReactJS 相当新。搜索了类似的主题无果。在我的应用程序中，我只想在所有字段都有内容时启用我的提交按钮。所有输入字段都绑定(bind)到状态。

在我的 onChange 事件处理函数上:

• 我更新绑定(bind)到我的字段的状态，从而更新我的输入字段
• 在同一个处理程序函数中，我声明了一个基于逻辑运算符链的 bool 值，每个状态都需要使用“&&”的值
• 将 !result 分配给名为“buttonDisabled”的状态
• 然后将此状态分配给按钮的“已禁用”属性
• 禁用属性的默认状态为真

代码

onInputChange = (e) => {
    e.preventDefault();
    const newValue = e.target.value;

    const targetElement = e.target.id;
    this.setState(() => {

        return {
            entryInput: newValue, 
            [targetElement]: newValue
        }
    })

    this.setState( () => {
        let buttonState =
        (this.state.symbol && 
        this.state.contracts &&
        this.state.open);
        return {
            buttonDisabled: buttonState
        }

    })

}

在我的按钮元素上:

<Button disabled={this.state.buttonDisabled} onClick={...} ?>

预期结果 - “提交”被禁用，直到所有状态都包含值(即所有字段都有值)为止

实际结果 - “提交”被禁用，但在我填写的最后一个文本框的第二个条目上启用。

• 我已经在控制台记录了结果 bool 值，它完全符合条件
• 按钮启用/禁用似乎是一个落后的更新
• 考虑到这可能是 && 返回 bool 值/值的方式，我明确地使用了与 === '' 和相同问题的比较。也尝试过 if/else 语句

我可能在某处存在逻辑空白，但一直在转动我的轮子，如果能得到一些帮助会很棒。

谢谢

Answer 1

您不需要将值存储在状态中，您实际上可以在render 函数本身中进行检查。 默认 render 函数在每次 setState 被调用时被调用:

import React from "react";
import ReactDOM from "react-dom";

class Form extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
      age: ""
    };
  }

  nameChange = (e) => {
    this.setState({ name: e.target.value });
  };

  ageChange = (e) => {
    this.setState({ age: e.target.value });
  };

  submit = () => {
    const { name, age } = this.state;
    alert(`name: ${name} is age: ${age}`);
  };

  render() {
    const { name, age } = this.state;
    const enabled = name.length > 0 && age.length > 0;
    return (
      <form onSubmit={this.submit}>
        <input
          type="text"
          placeholder="Enter name"
          value={this.state.name}
          onChange={this.nameChange}
        />
        <input
          type="text"
          placeholder="Enter age"
          value={this.state.age}
          onChange={this.ageChange}
        />
        <button disabled={!enabled}>Submit</button>
      </form>
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<Form />, root);

另外，请记住:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.