Question

我不知道如何在React中为自定义Button组件禁用按钮。我希望它是有条件的，因此仅在写单词时才禁用。

<Button disabled>Disabled</Button>

Answer 1

这是Button组件的有效示例：https://codesandbox.io/s/y08xk0vzxz

这是代码：

function Button({ disabled, children }) {
  return <button disabled={disabled}>{children}</button>;
}

您可以检查codesanbox中的日志，并查看默认情况下（如果在JSX中为值指定了注释），则prop的值设置为true。

Answer 2

let isEmpty = true;

<Button disabled={isEmpty}>Disabled</Button>

此处，禁用的默认值为true。我们还可以根据需要传递条件值

Answer 3

我假设您正在输入表格。如果您正在React中使用表单，那么您应该做的第一件事就是将输入元素转换为受控元素。由于输入字段具有自己的状态，因此我们在其中输入的任何内容都将存储在输入字段中。我们应该摆脱输入字段的状态，而仅依赖状态对象。您想拥有单一的真理来源。受控元素没有自己的状态，它们通过props获取所有数据，并且通过引发事件来通知数据更改。在状态下，有一个用于表单输入的对象：

state={form:{username:"",password:""} //lets say we have 2 input fields.

现在我们依靠this.state.form，但是我们必须通过“值”属性传递此值。

<input value={this.state.account.username} />
<input value={this.state.account.password} />

由于其属性设置为空字符串，我们将无法在表单中输入任何内容。因此，必须动态地处理更改。

    handleChange=e=>{
        const account={...this.state.account}
        account[e.currentTarget.name]=e.currentTarget.value
        this.setState({account})}

初始化表单后，我们可以访问输入值。我们现在可以禁用该按钮。

<button disabled={this.state.form.username.value.length>0 && 
this.state.password.value.length>0}
      > submit</button>

或代替，您可以说或。

disabled={this.state.form.username.value.length>0 || this.state.password.value.length>0}

这是使用React表单的基本设置。

在React中将禁用属性添加到Button组件

3 个答案: