Question

I have a form that has three input fields, an Update button, and a Cancel button. I'm currently working on disabling the Update button if any of the three fields are empty, and then re-enabling the button once all the fields are populated. The input fields and the form buttons are kept in separate components, so I've been pulling the Input field values into the proper component using DOM manipulation.

I have a function written using lodash's find method that should do the trick, but for some reason it is being triggered when a change has been made to an input field, and not when the page loads. Additionally, it pulls in the previous value of the Input field instead of the actual value shown when the page loads.

For example, if the page loads with no value in one of the input fields, the Update button will be enabled. Once you type the first character into the empty input field, for example the letter A, the button will be disabled and the function will read the field's value as being empty. If I then type the letter S into the field, so its actual value is AS, the button will then be re-enabled and the function will read the value as A, its previous value.

Since the function returns a boolean value, I am calling it when I pass the disabled prop to the button. Below is the function I've got written, as well as how the function is being called within the Render function. I feel like there is something obvious that I'm missing, and if anyone can provide assistance on thiis I'd greatly appreciiate it. Please let me know if there's more information needed from me.

Disabled Button Check:

  disableButtonCheck = () => {
    const dataField = document.getElementsByClassName('InputField__input___i2o8Y');

    const nullValueChecker = find(dataField, (field) => {
      return field.defaultValue === '';
    });

    if (nullValueChecker) {
      return true;
    }
    return false;
  }

Disable Button in Render:

  <div className={style['action-buttons']}>
    <PrimaryButton
      onClick={() => {
        this.updateHandler();
      }}
      disabled={this.disableButtonCheck()}              
      extraClassName={style.update}
      data-action="update"
    >

Update: I should have noted that I'm calling the input fields as a class, they're being called as an array of objects. I'm trying to iterate through the array and return only a true value if any empty strings are found, otherwise return false if there aren't.

Answer 1

Using jquery you can do something like this:

$(document).ready(function(){
    $('.updateButton').prop('disabled',true);
    $('#inputFeild').keyup(function(){
        $('.updateButton').prop('disabled', this.value == "" ? true : false);     
    })
});

initially you disable the button, on every keystroke check if the user has input anything, then enable the update button if required.

Answer 2

由于您使用的是React，因此建议您将禁用的布尔值保持在状态。您可以通过以下方式实现您想要的：

状态：

state = {
  disabledSubmit: true
}

表格：

<form onSubmit={this.submitFunc}>

    <input className="form-input" type="text" onChange={this.checkValue}/>
    <input className="form-input" type="text" onChange={this.checkValue}/>
    <input className="form-input" type="text" onChange={this.checkValue}/>
    <input className="form-input" type="text" onChange={this.checkValue}/>

    <input class="form-submit" type="submit" disabled={this.state.disabledSubmit}/>

</form>

功能：

checkValue = () => {
   var inputs = document.getElementsByClassName('form-input')
   var arr = []
   for (var i =0; i < inputs.length; i++){
      inputs[i].value === '' ? arr.push(inputs[i].value) : null
   }
   arr.length > 0 ? this.setState({disabledSubmit: true}) : this.setState({disabledSubmit: false})
}

不幸的是，在处理HTML元素数组时，不能使用filter或map之类的功能，因此需要使用for循环。

希望这会有所帮助！

编辑：最初我说过，您可以使用componentDidMount期间收集所有输入并存储在状态中，这样就不必每次有人输入内容时都document.getElementsByClassName进行操作。处于状态的元素，无论如何都必须更新onChange中的元素以跟踪更改并以状态更新它们。所以这可能更好。

Answer 3

我必须在这个答案的开头加上一个事实，即React的方式是将onChange道具直接附加到输入并相应地更新组件状态。

如果出于某种原因您无权访问input元素，则可以使用componentDidMount并将事件处理程序附加到oninput或{{1} }事件：

onchange

要查看工作示例，请查看以下沙箱：https://codesandbox.io/s/5koq5nv32l

Answer 4

我发现此问题与何时触发函数本身无关。问题在于，当用户在字段中键入内容时，而不是在实际调用函数时，会将DOM元素设置为函数中的变量。

Function being triggered on Input entry, need to be triggered when page loads

4 个答案: