当父组件状态更改时，将类添加到子组件

Question

This is my first time attempting to build with React. I typically write UI interaction with jQuery or plain old JS. I simply want a text field which when there is text entered has a class added to it so that I can style it differently to the default state. Note I only want this class adding when there is at least one character entered, not when the field is focused.

I already have an onChange function in the child component which is used to change the state of 'textEntered' but I can't figure out how to make use of this state in the child component to add a class.

Here is my parent component

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'));

And here is the child component

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

Pass the class name from parent component, and also put the check on that. If text field has atleast one character then pass the actual class name otherwise blank string.

Since you are storing the value of text field inside state of parent component so put the condition like this:

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>

Inside child component apply this customClass.

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>
);

Note: Another way is, pass the value in props instead of passing the class name and put the condition inside child component directly.