Jak wyłączyć przycisk w React.js

Mam ten komponent:

import React from 'react';

export default class AddItem extends React.Component {

add() {
    this.props.onButtonClick(this.input.value);
    this.input.value = '';
}


render() {
    return (
        <div className="add-item">
            <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
            <button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
        </div>
    );
}

}

Chcę, aby przycisk był wyłączony, gdy wartość wejściowa jest pusta. Ale powyższy kod nie działa. To mówi:

add-item.component.js: 78 Uncaught TypeError: Cannot read property „value” of undefined

wskazuje na disabled={!this.input.value}. Co tu robię źle? Zgaduję, że być może ref nie jest jeszcze tworzony, gdy rendermetoda jest wykonywana. Jeśli tak, jakie jest obejście?

Używanie refsnie jest najlepszą praktyką, ponieważ czyta bezpośrednio DOM, lepiej statezamiast tego użyć Reacta . Ponadto przycisk nie zmienia się, ponieważ komponent nie jest ponownie renderowany i pozostaje w swoim stanie początkowym.

Możesz używać setStaterazem z onChangedetektorem zdarzeń, aby renderować komponent ponownie za każdym razem, gdy zmieni się pole wejściowe:

// Input field listens to change, updates React's state and re-renders the component.
<input onChange={e => this.setState({ value: e.target.value })} value={this.state.value} />

// Button is disabled when input state is empty.
<button disabled={!this.state.value} />

Oto działający przykład:

class AddItem extends React.Component {
  constructor() {
    super();
    this.state = { value: '' };
    this.onChange = this.onChange.bind(this);
    this.add = this.add.bind(this);
  }

  add() {
    this.props.onButtonClick(this.state.value);
    this.setState({ value: '' });
  }

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

  render() {
    return (
      <div className="add-item">
        <input
          type="text"
          className="add-item__input"
          value={this.state.value}
          onChange={this.onChange}
          placeholder={this.props.placeholder}
        />
        <button
          disabled={!this.state.value}
          className="add-item__button"
          onClick={this.add}
        >
          Add
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <AddItem placeholder="Value" onButtonClick={v => console.log(v)} />,
  document.getElementById('View')
);

<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>
<div id='View'></div>

W HTML

<button disabled/>
<buttton disabled="true">
<buttton disabled="false">
<buttton disabled="21">

Wszystkie sprowadzają się do disabled = "true", ponieważ zwraca prawdę dla niepustego ciągu. Dlatego w celu zwrócenia fałszu należy przekazać pusty ciąg w instrukcji warunkowej, takiej jak this.input.value? "True": "" .

render() {
    return (
        <div className="add-item">
            <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
            <button disabled={this.input.value?"true":""} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
        </div>
    );
}

Nie powinieneś ustawiać wartości wejścia za pomocą ref.

Zapoznaj się z dokumentacją dotyczącą kontrolowanych składników formularzy tutaj - https://facebook.github.io/react/docs/forms.html#controlled-components

W skrócie

<input value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />

Wtedy będziesz mógł kontrolować stan wyłączenia za pomocą disabled={!this.state.value}

Istnieje kilka typowych metod kontrolowania renderowania komponentów w Reakcie.

Ale nie użyłem tutaj żadnego z nich, po prostu użyłem ref do przestrzeni nazw podstawowych elementów potomnych składnika.

class AddItem extends React.Component {
    change(e) {
      if ("" != e.target.value) {
        this.button.disabled = false;
      } else {
        this.button.disabled = true;
      }
    }

    add(e) {
      console.log(this.input.value);
      this.input.value = '';
      this.button.disabled = true;
    }

    render() {
        return (
          <div className="add-item">
          <input type="text" className = "add-item__input" ref = {(input) => this.input=input} onChange = {this.change.bind(this)} />
          
          <button className="add-item__button" 
          onClick= {this.add.bind(this)} 
          ref={(button) => this.button=button}>Add
          </button>
          </div>
        );
    }
}

ReactDOM.render(<AddItem / > , document.getElementById('root'));

<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>
<div id="root"></div>

this.inputjest niezdefiniowana, dopóki nie refzostanie wywołana funkcja zwrotna. Spróbuj ustawić this.inputjakąś wartość początkową w konstruktorze.

Z dokumentacji React na temat referencji , nacisk mój:

wywołanie zwrotne zostanie wykonane natychmiast po zamontowaniu lub odmontowaniu komponentu

Miałem podobny problem, okazuje się, że nie potrzebujemy do tego hooków, możemy wykonać renderowanie warunkowe i nadal będzie działać dobrze.

<Button
    type="submit"
    disabled={
        name === "" || email === "" || password === "" ? true : false
    }
    fullWidth
    variant="contained"
    color="primary"
    className={classes.submit}>
    SignUP
</Button>

bardzo prostym rozwiązaniem jest użycie useRefhaka

const buttonRef = useRef();

const disableButton = () =>{
  buttonRef.current.disabled = true; // this disables the button
 }

<button
className="btn btn-primary mt-2"
ref={buttonRef}
onClick={disableButton}
>
    Add
</button>

Podobnie możesz włączyć przycisk za pomocą buttonRef.current.disabled = false

poprostu dodaj:

<button disabled={this.input.value?"true":""} className="add-item__button" onClick={this.add.bind(this)}>Add</button>