代码之家 › 专栏 › 技术社区 › Harrison Cramer

在reactjs中从组件状态传递样式

react-props events reactjs css javascript

Harrison Cramer · 技术社区 · 7 年前

我有以下组件:

import React from "react";
import { connect } from "react-redux";

class Filter extends React.Component {
  state = {
    value: ''
  };

  handleChange = (e) => {
    let value = e.target.value;
    if(value){
      document.getElementById("clear").style["display"] = "none";
      document.getElementById("fetch").style["display"] = "none";

    } else {
      document.getElementById("clear").style["display"] = "inline-block";
      document.getElementById("fetch").style["display"] = "inline-block";
    }
    this.setState({ value });
    this.props.handleFilter({ value });
  }

  render(){
  let content = this.props.items > 0 ? (
      <div
        className="filter"
        >
        <input
          id="search-input"
          type="text"
          placeholder="Search..."
          value={this.state.value}
          onChange={this.handleChange}
        />
      </div>
    ) : <div></div>
    return content;
  }
}

const mapStateToProps = (state,props) => ({
  items: state.settings.length
});

module.exports = connect(mapStateToProps, null)(Filter);

有没有一种方法可以更优雅地将道具传递给clear和fetch组件?我试图根据与搜索输入的交互来设置它们的样式(基本上,我希望在搜索值为“”时能够设置它们的样式)。 如何根据当前组件的状态发送样式作为道具?

2 回复 | 直到 7 年前

Arulmozhi Manikandan 7 年前

请回复jss,这正是您正在搜索的内容:请查找以下示例:

import React, {
  Component
} from 'react'
import injectSheet from 'react-jss'
import classNames from 'classnames'


class someComponent extends Component {
  handleClose = () => {}

  render() {
    const {
      classes,
    } = this.props

    return ( <
      div className = {
        classes.resize
      } >
      <
      /div>
    )
  }
}


const styles = {
  container: {
    width: '100%',
    height: '100rem'
    borderBottom: '10px'
  }
}

export default injectSheet(styles)(someComponent)

Max K 7 年前

如果使用名为“样式化组件”的库,可以像在本例中一样轻松地执行此操作: https://www.styled-components.com/docs/basics#passed-props . 这个库的思想是包装基本的html组件,比如 <input> 到 <Input> ,然后使用新的 <输入> Render()方法中的组件。新组件将通过将值作为道具从您的状态传递来控制。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

11 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

11 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

11 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

11 月前

Luckkks · 过渡色工作不正常

11 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

11 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

11 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

11 月前

noblerare · Vite错误-未定义导出(SSR)

11 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

11 月前