Question

Reactjs！您好，我是Reactjs的新手。我试图将具有类名（dropdownbutton1＆dropdownbutton2）的选择标签连接到切换按钮，以便在打开ToggleButton时，选择标签下拉按钮的边框会突出显示并设置为必填。这里我附加了.jsx和.css文件。请帮忙。

<div className='ToggleButton'>
  <ToggleButton onClick={this.togglebutton} 
                checked={this.state.active}/>
</div>

<div className='dropdownbutton1'>
  <label>First</label>
  <br/>
  <select defaultValue={-1}>
    <option disabled value={-1}> </option>
    <option value='yes'>yes</option>
    <option value='no'>no</option>
  </select>
</div>

<div className='dropdownbutton2' >
  <label>Second</label>
  <br/>
  <select defaultValue={-1}>
   <option disabled value={-1}> </option>
   <option value='One'>One</option>
   <option value='Two'>Two</option>
  </select>
</div>

.css文件

.ToggleButton {
  grid-column: 4;
  grid-row: 1/2;
 }
. dropdownbutton1 {
  grid-column: 4;
  grid-row: 2/3;

}
. dropdownbutton2 {
  grid-column: 3;
  grid-row: 2/3;
}

Answer 1

JSX：

import os
import sys
import arcpy

def files():
    n = 0
    while True:
        n += 1
        yield open('/output/dir/%d.txt' % n, 'w')

pattern = 'hello'
fs = files()
outfile = next(fs)
filename = r'C:\output\dir\filename.txt'

with open(filename) as infile:
    for line in infile:
        if pattern not in line:
            outfile.write(line)
        else:
            items = line.split(pattern)
            outfile.write
            (items[0])
            for item in items:
                outfile = next(fs)
                outfile.write(item)

filename.close();outfile.close();

CSS：

    import React from "react";
    import ToggleButton from "react-toggle-button";
    import "./demo.css";

    class Demo extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          active: false
        };
      }

      togglebutton = () => {
        this.setState({ active: !this.state.active });
      };
      render() {
        return (
          <div>
            <div className="ToggleButton">
              <ToggleButton onClick={this.togglebutton} value={this.state.active} />
            </div>

            <div className="dropdownbutton1">
              <label>First</label>
              <br />
              <select className={this.state.active ? "dropdownActive" : null}>
                <option disabled value={1} />
                <option value="yes">yes</option>
                <option value="no">no</option>
              </select>
            </div>

            <div className="dropdownbutton2">
              <label>Second</label>
              <br />
              <select className={this.state.active ? "dropdownActive" : null}>
                <option disabled value={1} />
                <option value="One">One</option>
                <option value="Two">Two</option>
              </select>
            </div>
          </div>
        );
      }
    }

    export default Demo;

此处有有效的代码和框链接[https://codesandbox.io/s/x36ox4yomp]

Reactjs将Select标签连接到ToggleButton

1 个答案: