ReactJS-编写函数以启用输入文本验证的按钮

Question

I am working on a reactjs application that has a save button - that is disabled until valid user text is entered.

I have something like this currently in place

disabled={variable.length > 0}

but I want something more like this

disabled={(this.isValid(variable)}

however - it doesn't appear to be invoked.

I've added the function outside of the render - mocked as true for now

  isValid(value) {
      console.log("value", value);
      return true;
  }

do I have to do a bind this? add it to the constructor method?

Answer 1

Are you updating "variable" in your state onChange? You may also consider using onBlur (when users exits the input). Also you have syntax error at {(this.isValid(variable)} you have a "(" after "{" that is not closed.

Working example:

import ReactDOM from "react-dom";
import React, { Component } from "react";

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      text: e.target.value
    });
  }

  isValid(text) {
    return text.length > 0;
  }

  render() {
    return (
      <div>
          <input value={this.state.text} onChange={e => this.handleChange(e)} />
          <button disabled={!this.isValid(this.state.text)}>Add</button>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

Answer 2

I think the problem is here: disabled={(this.isValid(variable)} there is a parenthesis left at the beginning.

but I'll pass two examples, one using class and one using hooks:

import React, { Component } from "react";

export default class ExemploWithClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      variable: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      variable: e.target.value
    });
  }

  isValid(value) {
    return value.length > 0;
  }

  render() {
    return (
      <>
        <input
          value={this.state.variable}
          onChange={e => this.handleChange(e)}
        />
        <button disabled={!this.isValid(this.state.variable)}>Enter</button>
      </>
    );
  }
}

With Hooks ;)

import React, { useState } from "react";

export default function ExemploWithHooksComponent() {
  const [variable, setVariable] = useState("");

  function handleChange(e) {
    setVariable(e.target.value);
  }

  function isValid(value) {
    return value.length > 0;
  }

  return (
    <>
      <input value={variable} onChange={handleChange} />
      <button disabled={!isValid(variable)}>Enter</button>
    </>
  );
}