Question

我是新来的，有一个我找不到答案的问题。

我目前正在使用ReactJS在网站上工作，我希望有一个按钮可以在用户单击时自动填充。该按钮总共应该有5个阶段。

我不是要您为我编写代码，而只是帮助我找到解决此问题的最佳方法。

那么我到底要问什么？ 正如您在此

中所见

image link

这是一个框式元素，只要用户单击它（它可以单击整个元素），进度就会填满，变成类似这样的东西

something like this

因此第一行现已标记。当用户再次按下它时，第二个栏将填充

2nd bar fills

重要-这些栏中将填充文本。

到目前为止我做了什么？ 我一直在考虑每次用户按元素时都具有5张不同的图像，但是我想知道是否有可能是一种更好的方法（就像让DIV成为背景图像，并且每当用户按下...时，子div就会填充）。

希望我能表明自己的意思，并感谢您的宝贵时间！

Answer 1

在使用反应时。使用创建步骤/级别作为组件，您将传递样式道具。您可以根据需要将该组件映射5次或n次。您显示的视图不需要图像，可以使用CSS来实现。

用户单击时更改组件的道具。

Answer 2

他们的关键概念是国家。当您单击按钮时，应设置一些状态，并且在渲染按钮时，应基于状态进行渲染。

这是一个简单的示例，其中我渲染一个button，其中包含5个div元素，这些元素根据状态被填充（通过设置backgroundColor样式属性）。

class Example extends Component {

    constructor(props) {
        super(props);

        this.state = {
            buttonState: 0,
        };
    }

    onClick = () => {
        let buttonState = this.state.buttonState;
        buttonState++;
        if(buttonState > 4) buttonState = 0; // wrap around from 4 - 0
        this.setState({buttonState: buttonState});
    }

    // render a button element with some text, and a background color based on whether filled is true/false
    renderButtonElement(elementText, filled) {
        const backgroundStyle = filled ? {backgroundColor: 'green'} : {backgroundColor: 'white'};
        const textStyle = {color: 'grey'};

        return(
            <div style={[backgroundStyle, textStyle]}>
                <div>{elementText}</div>
            </div>
        );
    }

    render() {
        return(
            <button
                onClick={this.onClick}
            >
                {/*  make a temporary array of 5 elements, map over them and render an element for each one */}
                {Array(5).fill().map((_, i) => this.renderButtonElement(i + 1, i <= this.state.buttonState))}
            </button>
        );
    }
}

Answer 3

您可以使用状态来保持点击次数并在点击次数的基础上更改按钮背景。

const colors = ["#dfddc7", "#f58b54", "#a34a28", "#211717"]; //color array
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index : 0
    }
  }
  handleChange() { // function will be called whenever we click on button
   let {index} = this.state;
   if (index >= 5) {
    return; // you don't want to change color after count 5
   }
   index++;
   console.log(index);
   this.setState({index})
  }
  render() {
   const {index} = this.state;
   return (
    <div className="App">
     <button style = {{background:colors[index]}} //we are setting dynamic color from array on the basis of index
       onClick = {this.handleChange.bind(this)}> click to change images 
     </button>
     </div>
   );
  }
}

Answer 4

这是一个可行的示例。您不需要所有不同状态的图像。使用HTML动态执行此操作要灵活得多。

此操作的关键是跟踪单击按钮的次数。在此示例中，它使用currentState来跟踪它被单击了多少次。

const defaultStyle = {
  width: 100,
  padding: 5,
};

class MultiLevelButton extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      currentState: 0,
    };
    
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    const { currentState } = this.state;
    
    if (currentState < this.props.states.length) {
      this.setState({
        currentState: currentState + 1,
      });
    }
  }
  
  reset() {
    this.setState({
      currentState: 0,
    });
  }
  
  render() {
    const { currentState } = this.state;
    const { states } = this.props;
    
    return (
      <button onClick={this.handleClick} style={{border: 'none', outline: 'none'}}>
        {
          states
            .map((s, i) => {
              const stateNumber = states.length - i;
              const overrides = stateNumber <= currentState ? { backgroundColor: '#000', color: '#fff' } : {};
              const style = {
                ...defaultStyle,
                backgroundColor: s,
                ...overrides,
              };
              return <div style={{...style}}>{stateNumber}</div>
            })
        }
      </button>
    )
  }
}

const buttonRef = React.createRef();

ReactDOM.render(
  <div>
    <MultiLevelButton ref={buttonRef} states={['#bbb', '#ccc', '#ddd', '#eee', '#fff']} />
    <MultiLevelButton states={['#fcc', '#cfc', '#ccf']} />
    <div>
      <button onClick={() => buttonRef.current.reset()}>Reset</button>
    </div>
  </div>,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app" />

Answer 5

您可以将<div></div>放在背景颜色不同的按钮内，而不是图像上。

在下面的示例中，我保持该状态下的点击次数。通过将该值与步骤的索引进行比较，可以查看它是否需要为绿色或透明

const numberOfSteps = 5;
class App extends React.Component {
  state = {
    numberOfClicks: 0
  };

  handleClick = e => {
    this.setState({
      numberOfClicks: (this.state.numberOfClicks + 1) % (numberOfSteps + 1)
    }); // Use module (%) to reset the counter after 5 clicks
  };

  render() {
    const { numberOfClicks } = this.state;
    const steps = Array(numberOfSteps)
      .fill()
      .map((v, i) => i)
      .map((i, index) => {
        const color = numberOfClicks >= index + 1 ? "limegreen" : "transparent";
        return (
          <div
            style={{
              backgroundColor: color,
              height: "30px",
              border: ".5px solid gray"
            }}
          >
            Bar {index + 1}
          </div>
        );
      });
    return (
      <button
        className="button"
        style={{ height: "200px", width: "200px", backgroundColor: "lightgreen" }}
        onClick={this.handleClick}
      >
        {steps}
      </button>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">
  <!-- This element's contents will be replaced with your component. -->
</div>

创建一个填充React的按钮

5 个答案: