Question

这是我第一次尝试使用React构建。我通常用jQuery或普通的旧JS编写UI交互。我只想要一个文本字段，当输入文本时，会添加一个类，以便我可以将其设置为默认状态。注意我只想在输入至少一个字符时添加此类，而不是在字段被聚焦时添加。

我已经在子组件中有一个onChange函数，用于更改＆＃39; textEntered＆＃39;但我无法弄清楚如何在子组件中使用此状态来添加类。

这是我的父组件

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

从父组件传递类名，并对其进行检查。如果文本字段至少包含一个字符，则传递实际的类名，否则为空字符串。

由于您将文本字段的值存储在父组件的状态中，因此请将条件设置为：

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

注意：另一种方法是，在props中传递值而不是传递类名，并将条件直接放在子组件中。

当父组件状态发生变化时，将一个类添加到子组件

1 个答案: