Wie rendere ich ein unbestimmtes Kontrollkästchen in JSX?

Folgendes habe ich versucht:

render() {
  return <input type="checkbox" 
                checked={this.props.state === "checked"} 
                indeterminate={this.props.state === "indeterminate"} />
}

indeterminate ist jedoch kein Attribut für HTMLElement, sondern eine Eigenschaft . Wie lege ich Eigenschaften in React / JSX fest?

19
ᅙᄉᅙ 21 Aug. 2015 im 14:43

6 Antworten

Beste Antwort

Mit dem Schritt componentDidMount (der nach dem ersten Rendern aufgerufen wird) können Sie diese Eigenschaft festlegen:

componentDidMount() {
    React.findDOMNode(this).indeterminate = this.props.state === "indeterminate";
}

Wenn Sie möchten, dass diese Eigenschaft bei nachfolgenden Renderings aktualisiert wird, führen Sie dasselbe auch in componentDidUpdate aus.

9
manji 21 Aug. 2015 im 11:50

Sie können die ref-Funktion auch direkt verwenden:

ReactDOM.render(
  <label>
    <input
      type="checkbox"
      ref={input => {
        if (input) {
          input.indeterminate = true;
        }
      }}
    />
    {' '}
    Un test
  </label>,
  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>
3
Kévin Berthommier 30 Okt. 2019 im 13:19

Eine Alternative wäre, ein ref -Attribut mit einem Rückruf zu verwenden, um die Eigenschaft auf dem DOM-Knoten festzulegen. Beispielsweise:

render: function() {
  return (
    <input
        type="checkbox"
        ref={function(input) {
          if (input != null) {
            React.findDOMNode(input).indeterminate = this.props.indeterminate;
          }}
        {...this.props} />
  )
}
3
Paul Weaver 14 Jän. 2016 im 18:32

Ich würde wahrscheinlich eine zusammengesetzte Komponente erstellen, die die erforderlichen Hooks zum Festlegen oder Deaktivieren der indeterminate -Eigenschaft des Kontrollkästchens kapselt. Es sieht so aus, als würden Sie die ES2015-Syntax verwenden, daher werde ich hier einige dieser Funktionen verwenden.

class IndeterminateCheckbox extends React.Component {
  componentDidMount() {
    if (this.props.indeterminate === true) {
      this._setIndeterminate(true);
    }
  }

  componentDidUpdate(previousProps) {
    if (previousProps.indeterminate !== this.props.indeterminate) {
      this._setIndeterminate(this.props.indeterminate);
    }
  }

  _setIndeterminate(indeterminate) {
    const node = React.findDOMNode(this);
    node.indeterminate = indeterminate;
  }

  render() {
    const { indeterminate, type, ...props } = this.props;
    return <input type="checkbox" {...props} />;
  }
}

// elsewhere

render() {
  return <IndeterminateCheckbox
           checked={this.props.state === "checked"} 
           indeterminate={this.props.state === "indeterminate"} />
}

Arbeitsbeispiel: https://jsbin.com/hudemu/edit?js,output

11
Michelle Tilley 21 Aug. 2015 im 16:26

Reagieren Sie auf die Implementierung von v15:

import React from 'react';

export default class Checkbox extends React.Component {
    componentDidMount() {
        this.el.indeterminate = this.props.indeterminate;
    }

    componentDidUpdate(prevProps, prevState) {
        if(prevProps.indeterminate !== this.props.indeterminate) {
            this.el.indeterminate = this.props.indeterminate;
        }
    }

    render() {
        const {indeterminate, ...attrs} = this.props;
        return <input ref={el => {this.el = el}} type="checkbox" {...attrs}/>;
    }
}
-1
mpen 18 Okt. 2016 im 04:12

Ich würde vorschlagen, eine einfache Komponente zu erstellen (Code, der aus Coffeescript portiert wurde, kann einige einfache Tippfehler enthalten):

const React = require('react');

module.exports = class IndeterminateCheckbox extends React.Component {
    componentDidMount() {
        this.refs.box.indeterminate = this.props.indeterminate;
    }

    componentDidUpdate(prevProps, prevState) {
        if(prevProps.indeterminate !== this.props.indeterminate) {
            this.refs.box.indeterminate = this.props.indeterminate;
        }
    }

    render() {
        return <input {...this.props} ref="box" type="checkbox"/>;
    }

}

Jetzt haben Sie eine einfache Komponente, die sich genau wie ein Kontrollkästchen verhält und die indeterminate Requisite unterstützt. Beachten Sie, dass hier viel Raum für Verbesserungen besteht, nämlich das Festlegen von PropTypes und die richtigen Standardeinstellungen für einige Requisiten sowie das Implementieren von componentShouldUpdate, um nur bei Bedarf etwas zu tun.

5
kastermester 3 Nov. 2016 im 13:45