javascript - 反应：从状态更改进度条的宽度

Question

我希望进度条的宽度根据输入百分比而变化。因此，如果您使用按钮提交数字，h4 会更改，但进度条的宽度尚未更改。我如何实现这一目标？这是我的代码：

function Progress() {

    const [progress, setProgress] = useState(0);

    return (
        <div>
            <div className="top-menu">
                <div>
                    <h1>Title</h1>
                </div>
            </div>

            <div className="progress-container">
                <h4>Progress: {progress} %</h4>
                <div className="progress-bar" style={width%}></div>
            </div>

            <div className="inputs">
                <label>Progress (in %)</label>
                <div className="input">
                    <form onSubmit={e => {
                        e.preventDefault();
                        const { value } = e.target.progress;
                        setProgress(value);
                        e.target.progress.value = '';
                    }}>
                        <input id="progress" type="text" placeholder="e.g. 75"></input>
                        <button type="submit" className="button">Update</button>
                    </form>
                </div>
            </div>
        </div>
    );

  }  

标签： javascriptreactjs

Answer 1

style您传递给div的道具progress-bar无效。

a 上的stylepropdiv是一个以属性名称为键的对象。所以你应该尝试类似的东西：

<div classname="progress-bar" style={ { width: `${progress}%` } }></div>