Hinzufügen einer Klasse zur untergeordneten Komponente, wenn sich der Status der übergeordneten Komponente ändert

Question

Dies ist das erste Mal, dass ich versuche, mit React zu bauen. Ich schreibe normalerweise UI-Interaktion mit jQuery oder einfach alten JS. Ich möchte einfach ein Textfeld, dem bei Eingabe von Text eine Klasse hinzugefügt wird, damit ich es anders als im Standardzustand formatieren kann. Hinweis: Ich möchte diese Klasse nur hinzufügen, wenn mindestens ein Zeichen eingegeben wurde und nicht, wenn das Feld fokussiert ist.

Ich habe bereits eine onChange-Funktion in der untergeordneten Komponente, die verwendet wird, um den Status von 'textEntered' zu ändern, aber ich kann nicht herausfinden, wie Sie diesen Zustand in der untergeordneten Komponente verwenden, um eine Klasse hinzuzufügen.

Hier ist meine Mutterkomponente

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import TextInput from './components/TextInput/TextInput'; 

export default class Form extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     textEntered: '', 
     completed: false, 
    }; 
    } 

    render() { 
    return (
     <div> 
     <TextInput 
      placeholderText={'Title'} 
      updateText={textEntered => this.setState({ textEntered })} 
      completed={this.state.completed} 
     /> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<Form />, document.getElementById('react-create-form')); 

Und hier ist das Kind Komponente

import React, { PropTypes } from 'react'; 

const TextInput = props => (
    <div> 
    <input 
     type={props.type} 
     placeholder={props.placeholderText} 
     onChange={e => props.updateText(e.target.value)} 
     data-completed={props.completed} 
    /> 
    </div> 
); 

TextInput.propTypes = { 
    type: PropTypes.string, 
    placeholderText: PropTypes.string, 
    updateText: PropTypes.func, 
    completed: PropTypes.bool, 
}; 

TextInput.defaultProps = { 
    type: 'text', 
}; 

export default TextInput; 

Answer 1

Geben Sie die Klassennamen von Stammkomponente und legt die Prüfung auch darauf. Wenn das Textfeld mindestens ein Zeichen hat, übergeben Sie den eigentlichen Klassennamen, ansonsten eine leere Zeichenfolge.

Da Sie den Wert des Textfeldes innerhalb Zustand der Elternkomponente so setzen die Bedingung wie folgt zu speichern:

customClass = {this.state.textEntered.length ? 'actualClassName': ''} 

Code:

<div> 
    <TextInput 
     customClass={this.state.textEntered.length ? 'actualClassName': ''} 
     placeholderText={'Title'} 
     updateText={textEntered => this.setState({ textEntered })} 
     completed={this.state.completed} 
    /> 
</div> 

Innen Kind Komponente dieses Custom gelten.

const TextInput = props => (
    <div> 
     <input 
      type={props.type} 
      className={props.customClass} 
      placeholder={props.placeholderText} 
      onChange={e => props.updateText(e.target.value)} 
      data-completed={props.completed} 
     /> 
    </div> 
); 

Hinweis: Eine andere Möglichkeit ist, den Wert in Requisiten geben statt den Klassennamen vorbei und den Zustand im Inneren Kind Komponente setzen direkt.