Question

我想做的是能够在动态创建的元素上切换一个活动类，以便能够更改所选复选框的css，给人的印象是已选择某个过滤器。我已经看过很多解决方案和指南来使我的应用程序正常运行，但是我似乎无法正确实现它。任何帮助将不胜感激。

复选框组件

    import React from 'react';

const Checkbox = (props) => {
  const { label, subKey } = props;
  const sub1 = `${subKey}1`;

  return (
    <label htmlFor={sub1} className="check_label">
      {label} 
      <input
        type="checkbox"
        id={sub1}
        checked={props.isChecked}
        onChange={props.handleCheck}
        onClick={() => console.log(label)}
        value={`${label.toLowerCase()}/?search=`}
      />
    </label>
  );
};
export default Checkbox;

和实现复选框的搜索组件

import React, { Component } from 'react';
import Checkbox from './Checkbox';

const APIQuery = 'https://swapi.co/api/';
const searchLabels = ['Planets', 'Starships', 'People', 'Species', 'Films', 'Vehicles'];


export default class Searchbutton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      endpointValue: '',
      searchValue: '',
    };
  }

  /* Funcionality to handle form and state of form */
  /* Changes state of value whenever the form is changed, in realtime. */
  handleChange(event) {
    this.setState({ searchValue: event.target.value });
  }

  /* Prevents default formsubmit */
  handleSubmit(event) {
    event.preventDefault();
  }

  /* Handles state of checkboxes and sets state as to prepend necessary filter for request */
  handleCheck(event) {
    this.setState({ endpointValue: event.target.value });
    if (this.state.endpointValue === event.target.value) {
      this.setState({ endpointValue: '' });
    }
  }

  /* Creates the checkboxes dynamically from the list of labels. */

  createBoxes() {
    const checkboxArray = [];
    searchLabels.map(item => checkboxArray.push(
      <Checkbox
        key={item}
        className="madeBoxes"
        subKey={item}
        endpointValue={this.state.endpointValue}
        handleChange={e => this.handleChange(e)}
        handleCheck={e => this.handleCheck(e)}
        label={item}
      />,
    ));
    return checkboxArray;
  }

  render() {
    return (
      <div className="search_content">
        <div className="search_wrapper">
          <form onSubmit={this.handleSubmit} method="#">
            <label htmlFor="searchBar">
              <input type="text" id="searchbar" className="search_bar" value={this.state.searchValue} onChange={e => this.handleChange(e)} />
            </label>
            <div>
              <input type="submit" className="search_button" value="May the Force be with you." onClick={() => this.props.searchWithApi(APIQuery + this.state.endpointValue + this.state.searchValue)} />
            </div>
          </form>

        </div>

        <div className="checkboxes">
          {this.createBoxes(this.labels)}
        </div>

        <div className="sort_filters">
          {' '}
          {/* These are options that the user can make in order to sort and filter the results.
          The idea is to make it so that changing the value auto-perform a new request */}
          {/* For sorting the returned objects based on user choice */}
          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid, until href added */}
          <a href="#" className="sort_button">Choose sort method</a>
          <ul className="sorting">
            <li className="sort_optn" href="#" value="lexicographical">Alphabetically</li>
            <li className="sort_optn" href="#" value="by_added_date">By added date</li>
            <li className="sort_optn" href="#" value="by_added_date_rev">By added date reversed</li>
          </ul>
        </div>
      </div>
    );
  }
}

Answer 1

您实际上不需要做出反应。您可以重新格式化一下代码，并使用CSS :checked伪类来解决它。

尤其是，不要将复选框包装在标签内，而应在输入后放置标签。例如，检查此小提琴：https://jsfiddle.net/8c7a0fx5/

Answer 2

您可以使用样式组件包。查看下面有关如何使用它的示例：

    import { Component } from 'react'
    import { render } from 'react-dom'
    import styled from 'styled-components'

    const StyledCheckbox = styled.div`
      label {
         background: ${props => props.active ? 'red': 'white'}
      }
    `

    class MyAwesomeComponent extends Component {
      constructor(){
        super()
        this.state = {
          isChecked: false
        }
        this.handleOnChange = this.handleOnChange.bind(this)
      }

      handleOnChange = ()=>{
        this.setState({
          isChecked: !this.state.isChecked,
        })
      }

      render(){
       const { isChecked } = this.state

        return(
          <StyledCheckbox active={isChecked}>
            <label>Names</label>
            <input type="checkbox" onChange={this.handleOnChange} />
          </StyledCheckbox>
        )
      }
    }

   render(<MyAwesomeComponent/>, document.getElementById('root'))

在codepen.io上工作的代码

将活动类添加到react元素以能够更改CSS

2 个答案: