Javascript 禁用无状态组件中的按钮-react

我试图弄清楚如何在只使用prop的无状态组件中设置禁用字段。无状态组件有一个输入字段，如果为空，我希望在同一组件中禁用submit按钮。我可以通过一个道具更新家长的状态给孩子，所以我想保持它没有状态，但我开始认为我可能需要它来检查按钮是否可以启用

我尝试了使用refs等不同的方法。这里是一个codesandbox项目，我有一个例子

无状态属性是：

const Childprop = function(props) {
  function handleNameChange(e) {
    e.preventDefault();
    props.onNameChange(e.target.newName.value);
  }
  function checkDisabled() {
    var input = document.getElementById("input");
    if (input.value === "") {
      return true;
    } else {
      return false;
    }
  }
  return (
    <p>
      The logged in user is: {props.nameProp}
      <form onSubmit={handleNameChange}>
        <input name="newName" type="text" id="input" />
        <input type="submit" disabled={checkDisabled} />
      </form>
    </p>
  );
};

---

谢谢

这是办不到的。应用程序中的某些内容必须调用setState、forceUpdate或重新呈现根应用程序，才能再次调用无状态函数。

您可以使其工作如下：

唯一的问题是，一旦按钮被禁用，就无法再次启用它，因为您无法再提交

---

我同意@azium方式是React方式。

我只会使用局部状态作为输入值。这将使它成为一个巨大的挑战

---

您基本上需要状态才能在该组件或父组件中工作。此外，当调用checkDisabled时，您不能假设inputinput将位于DOM中-请改用ref.trued ref。。似乎ref对disabled={}中的调用是不可访问/未定义的，所以基本上，即使只对isDisabled调用，也要使用state？我正在学习React并试图保持容器组件中的所有状态。我的意思是disabled实际上是一种状态。。这不是真的就是假的。。你不需要输入值的唯一原因是DOM有它自己的内部状态，你可以利用它，但在大多数react应用程序中，你无论如何都使用受控输入。你提供的示例也没有达到预期的效果，但看起来我无论如何都应该使用状态。感谢您可以在无状态组件中使用ref：您是对的@Anas，我误读了文档。将更新我的答案。

class Childprop extends React.Component {
    state = {
        newName: ''
    }

    handleNameChange = (e) => {
        e.preventDefault();
        props.onNameChange(this.state.newName);
        this.setState({ newName: '' });
    }

    render() {
        return (
            <div>
                The logged in user is: {props.nameProp}
                <form onSubmit={handleNameChange}>
                    <input name="newName" type="text" id="input" onChange={(e) => this.setState(e.target.value)} value={this.state.newName} />
                    <input type="submit" disabled={this.state.newName.length === 0} />
                </form>
            </div>
        );
    }
};