0

我正在创建一个反应应用程序，我必须在我的标题组件中添加一个输入切换。我尝试添加，但 JavaScript 不起作用。如果

这是头组件文件。在这个组件中，我包含了我的输入切换条件。我已将 JavaScript 代码放在导入的正下方。

有谁知道请查收。。谢谢

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Nav,
  Navbar,
  Collapse,
  DropdownMenu,
  DropdownItem,
  NavbarToggler,
  DropdownToggle,
  UncontrolledDropdown,
} from 'reactstrap';
import { Link, withRouter } from 'react-router-dom';
import Config from '../../../constants/config';
import { SidebarNavItems } from '../Sidebar';
import logoImages from '../../../images/logo.png';
require('./styles.scss');

var allInputs = document.querySelectorAll('.myInput');
allInputs.forEach(function(node) {
    node.addEventListener("click", function(){
      var allHiddenInputs = document.querySelectorAll('.hidden');
      if(allHiddenInputs.length === 0) {
        allInputs.forEach(function(input) {
          input.classList.add("hidden");
          input.classList.add("second");
          input.classList.remove("first");
        });
        node.classList.remove("hidden");
        node.classList.remove("second");
        node.classList.add("first");
      } else {
        allHiddenInputs.forEach(function(input) {
          input.classList.remove("hidden");
        });
      }
    });
});
class Search extends Component {
  constructor(props) {
    super(props);
  }

  render() {

    return (
      <div className="">
        <div className="input-container">
          <input type="password" placeholder="Input 1" className="myInput first" />
          <input type="password" placeholder="Input 2" className="myInput second hidden" />
        </div>
      </div>

    );
  }
}

export default withRouter(Search);

这是我链接到该组件的 css 文件。

.input-container {
  display: flex;
  flex-direction: column;
}
.myInput {
  margin: 10px;
  padding: 5px
}
.first {
  order: 1;
}
.second {
  order: 2;
}
.hidden {
  display: none;
}

在此处输入图像描述

4

4 回答 4

1

尝试将您的代码放入组件生命周期（如 a componentDidMount），然后它会起作用。DOM但是在反应中，直接使用节点并不是一个好的解决方案。更好的方法是这样做：

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {allInputsHidden: true}; // You can change it later
  }

  render() {

    return (
      <div className="">
        <div className="input-container">
          <input type="password" placeholder="Input 1" className="myInput first" />
          <input type="password" placeholder="Input 2" className={this.state.allInputsHidden ? "myInput second hidden" : "myInput second"} />
        </div>
      </div>

    );
  }
}

另外，你可以使用 packageclassnames让它看起来更漂亮

于 2018-08-09T04:07:43.130 回答
1

使用条件渲染来完成这个任务。你可以参考这个页面。将您的输入组创建为一个组件，并添加一个布尔属性以与if条件一起使用。这比添加类要好得多。

function Inputs(props) {
  const isFirst = props.isFirst;
  if (isFirst) {
    return <input type="password" placeholder="Input 1" className="myInput first" />;
  }
  return <input type="password" placeholder="Input 2" className="myInput second" />;
}

ReactDOM.render(
  <Inputs isFirst={true} />,
  document.getElementById('root')
);

并添加一个点击事件来切换isFirst变量的值。

于 2018-08-09T04:08:05.303 回答
1

您可以使用状态来决定要显示哪个元素...

   class Search extends Component {
             constructor(props) {
             super(props);
             this.state = {
             toggleInput1:true,

              }

      render() {

    return (
      <div className="">
        <div className="input-container">
         {this.state.toggleInput1?
          <input type="password" placeholder="Input 1" className="myInput 
           first" />: 
          <input type="password" placeholder="Input 2" className="myInput 
          second hidden" />
     }
        </div>
      </div>

    );
     }
    }

    export default withRouter(Search);

并在 EventListener 上更改工具输入的状态

handleClick = event => {
    this.setState({toggleInput1:!this.state.toggleInput1 });
  };
于 2018-08-09T04:09:01.873 回答
1

为了模拟与您尝试做的相同的事情，我会做的是使用本地状态来更新视图。您可以有条件地为每个渲染周期渲染项目和类名。

class App extends React.Component {
    constructor() {
      super()
      this.inputNames = ['input1', 'input2']
      this.state = {
        hiddenInputs: {
        input1: { hidden: false, first: true },
        input2: { hidden: true, first: false }
      },
      expanded: false
    }
  }
  handleClick(name) {
    const hI = Object.assign({}, this.state.hiddenInputs)
    let expanded = this.state.expanded

    if (expanded && hI[name].first === true) {
      // clicked on the first element, we hide the other
      expanded = false
    } else if (expanded) {
        // clicked on non first item, change order
      this.inputNames.forEach(input => {
        const isSame = input === name
        hI[input].first = isSame
        hI[input].hidden = !isSame
      })
    } else {
        // its not open yet, show the other
        expanded = true
    }

    this.setState({expanded, hiddenInputs: hI})
  }
  render() {
    const { input1, input2 } = this.state.hiddenInputs
    const {expanded} = this.state
    const clsName1 = `myInput${input1.hidden && !expanded ? ' hidden' : ''}${input1.first ? ' first' : ' second'}`;
    const clsName2 = `myInput${input2.hidden && !expanded ? ' hidden' : ''}${input2.first ? ' first' : ' second'}`;
    return (
        <div className="">
        <div className="input-container flex">
          <input type="password" placeholder="Input 1" onClick={this.handleClick.bind(this, 'input1')} className={clsName1} />
          <input type="password" placeholder="Input 2" onClick={this.handleClick.bind(this, 'input2')}  className={clsName2} />
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

CSS：

.flex {
  display: flex;
}
.first {
  order: 0;
}
.second {
  order: 1;
}
.hidden {
  display: none;
}

小提琴看看它在行动

于 2018-08-09T05:00:20.817 回答