输入为空时如何禁用按钮？

168

我是React.js的新手，如果这个问题对您来说太愚蠢了，对不起。

我试图在输入字段为空时禁用按钮。在React中，什么是野兽方法？

我正在执行以下操作：

<input ref="email"/>

<button disabled={!this.refs.email}>Let me in</button>

这样对吗？

这不仅仅是动态属性的复制，因为我也很好奇关于将数据从一个元素传输/检查到另一个元素的好奇。

reactjs

— 斯蒂芬·苏沃洛夫（Stepan Suvorov）
source

3

ReactJS

— WiredPrairie 2015年

257

您需要将输入的当前值保持在状态中（或通过回调函数或sideways或<此处是您应用的状态管理解决方案>将其值更改传递给父级，以便最终将其传递回您的组件作为道具），因此您可以导出按钮的禁用道具。

使用状态的示例：

<meta charset="UTF-8">
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<div id="app"></div>
<script type="text/jsx;harmony=true">void function() { "use strict";

var App = React.createClass({
  getInitialState() {
    return {email: ''}
  },
  handleChange(e) {
    this.setState({email: e.target.value})
  },
  render() {
    return <div>
      <input name="email" value={this.state.email} onChange={this.handleChange}/>
      <button type="button" disabled={!this.state.email}>Button</button>
    </div>
  }
})

React.render(<App/>, document.getElementById('app'))

}()</script>

展开摘要

— 乔尼·布坎南
source

3

太棒了，该示例可以正常运行。很好的完整示例和很好的交互式演示。

— four43 2015年

1

这是行不通的，因为disabled仅将其附加到元素上就意味着该元素将被禁用。它不是笨蛋。看到这个：developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/…–

— Kayote，

4

@Kayote对于React不正确。这些标记不是HTML，而是JSX。在JSX中，如果将属性分配为false，则在转换为HTML时将其完全删除。您只是忽略了上面的评论，说它运行得很好吗？

— 本·男爵

2

@BenBaron感谢您的澄清。我不记得我在哪里/如何使用它，但是，我遇到了一些问题。我赞成您的评论，以便其他人知道此方法是基于人们经验的正确方法。

— Kayote

3

@Kayote感谢和抱歉，如果我对评论的最后部分有点不礼貌。这真是漫长的一天。

— 本·男爵

8

使用常量可以组合多个字段进行验证：

class LoginFrm extends React.Component {
  constructor() {
    super();
    this.state = {
      email: '',
      password: '',
    };
  }
  
  handleEmailChange = (evt) => {
    this.setState({ email: evt.target.value });
  }
  
  handlePasswordChange = (evt) => {
    this.setState({ password: evt.target.value });
  }
  
  handleSubmit = () => {
    const { email, password } = this.state;
    alert(`Welcome ${email} password: ${password}`);
  }
  
  render() {
    const { email, password } = this.state;
    const enabled =
          email.length > 0 &&
          password.length > 0;
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Email"
          value={this.state.email}
          onChange={this.handleEmailChange}
        />
        
        <input
          type="password"
          placeholder="Password"
          value={this.state.password}
          onChange={this.handlePasswordChange}
        />
        <button disabled={!enabled}>Login</button>
      </form>
    )
  }
}

ReactDOM.render(<LoginFrm />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>


</body>

展开摘要

— Gi1ber7
source

7

另一种检查方法是内联函数，以便在每个渲染中检查条件（每个道具和状态改变）

const isDisabled = () => 
  // condition check

这有效：

<button
  type="button"
  disabled={this.isDisabled()}
>
  Let Me In
</button>

但这不起作用：

<button
   type="button"
   disabled={this.isDisabled}
>
  Let Me In
</button>

— 马克·斯洛斯·伊士曼
source

-1

它很简单，我们假设您通过扩展Component使其包含一个完整的状态，该Component包含以下内容

class DisableButton extends Components 
   {

      constructor()
       {
         super();
         // now set the initial state of button enable and disable to be false
          this.state = {isEnable: false }
       }

  // this function checks the length and make button to be enable by updating the state
     handleButtonEnable(event)
       {
         const value = this.target.value;
         if(value.length > 0 )
        {
          // set the state of isEnable to be true to make the button to be enable
          this.setState({isEnable : true})
        }


       }

      // in render you having button and input 
     render() 
       {
          return (
             <div>
                <input
                   placeholder={"ANY_PLACEHOLDER"}
                   onChange={this.handleChangePassword}

                  />

               <button 
               onClick ={this.someFunction}
               disabled = {this.state.isEnable} 
              /> 

             <div/>
            )

       }

   }

— 凯特
source