親コンポーネントの状態が変化したときに子コンポーネントにクラスを追加する

Question

これはReactで初めてビルドしようとしたときです。私は通常、UIインタラクションをjQueryまたはプレーンな古いJSと書いています。私は単純に、入力されたテキストがあるときにそれにクラスが追加されたテキストフィールドを必要とするので、デフォルトの状態と違ったスタイルにすることができます。注フィールドがフォーカスされているときではなく、少なくとも1つの文字が入力されている場合にのみ、このクラスを追加します。

私はすでに 'textEntered'の状態を変更するために使用される子コンポーネントにonChange関数を持っていますが、この状態を子コンポーネントで使用してクラスを追加する方法を見つけることはできません。

は、ここに私の親コンポーネント

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

であり、ここで、子コンポーネント

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

親コンポーネントからクラス名を渡すことはなく、また、その上でチェックを入れてあります。テキストフィールドに少なくとも1文字がある場合は、実際のクラス名を渡します。それ以外の場合は空白文字列を渡します。

あなたが親コンポーネントの状態内のテキストフィールドの値を格納しているのでので、このように条件を入れては：

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

コード：

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

子コンポーネントInsideは、この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> 
); 

注：別の方法があるが、代わりにクラス名を渡すの小道具に値を渡し、直接の子コンポーネントの内部状態を置きます。