小编Jor*_*dan的帖子

好的,所以我遇到的问题是使范围的输出响应.

当你运行代码时它当前工作正常,因为值是以像素为单位的位置,但是当你调整视口大小时,它不能正确地与滑块对齐.我想可能使用百分比而不是像素对齐输出可能会解决问题,但我不确定如何正确实现它.

我试过搞乱它但没有运气,有谁知道我怎么能做到这一点？

HTML:

<form>
    <div class="range-control" data-thumbwidth="20">
        <input id="inputRange" type="range" min="0" max="100" step="1" value="0">
            <div><output name="rangeVal">0</output></div>
    </div>
 </form>

CSS:

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-family: Arial, sans-serif;
}

form {
    padding-top: 100px;
    margin: 0 auto;
}

.range-control {
    position: relative;
}

input[type=range] {
    display: block;
    width: 100%;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    position: relative;
    height: 12px;
    border: 1px solid #b2b2b2;
    border-radius: 5px;
    background-color: …

我们有一个对象“Schema”，其中包含表单的输入。我们映射输入并为每个输入返回一个自定义组件，然后完成其余的工作。问题是：

1) 自定义组件不能有 key 属性，因为 key 是 React 使用的特殊属性，不会传递给子组件。

2) 列表中的第一项必须有一个 key 属性，以便 React 知道如何更新组件。

如果列表中的第一项是自定义组件，则这两者是互斥的。我们可以通过用 div 或任何其他通用元素包围 QuestionBlock 并向其添加 key 属性来解决此问题。然而，这会导致代码和 HTML 看起来很草率，有过多的 div 只是为了解决这个问题。还有其他更清洁的方法吗？下面是我们之前的代码：

render() {
    return (
        <div className="App">
            {Object.keys(Schema.inputs).map((key,index) => {
                let data = Object.assign({}, Schema.inputs[key]);

                data.index = index;

                return <QuestionBlock key={index} {...data} />;
            }}
        </div>
    );
}

使用上述代码时控制台中显示警告：

警告：QuestionBlock：key不是道具。尝试访问它将导致undefined被返回。如果您需要在子组件中访问相同的值，则应该将其作为不同的 prop 传递。

下面是有效的代码，但看起来很混乱：

render() {
    return (
        <div className="App">
            {Object.keys(Schema.inputs).map((key,index) => {
                let data = Object.assign({}, Schema.inputs[key]);

                data.index = index;

                return <div …

所以我最近一直在搞乱html范围滑块的样式.

我在codepen上遇到了一支笔,它有一些非常鼓舞人心的设计,其中一些功能正常.

这是一个源代码.

HTML:

<input type="range" data-idx="1">

CSS:

html {
  background: #393939;
}

input[type='range'] {
  display: block;
  margin: 2.5em auto;
  border: solid .5em transparent;
  padding: 0;
  width: 15.5em;
  height: 1em;
  border-radius: .25em;
  background: transparent;
  font-size: 1em;
  cursor: pointer;
}
input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 15.5em;
  height: 0.5em;
  border-radius: 0.25em;
  background: #fff;
}
.js input[type='range']::-webkit-slider-runnable-track {
  background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-moz-range-track {
  width: 15.5em;
  height: 0.5em;
  border-radius: 0.25em;
  background: #fff;
}
.js input[type='range']::-moz-range-track { …

所以基本上,我一直在尝试编写一些jQuery,它会在点击时添加和复制一行输入,除此之外一切都正常.

问题的插图:

当你点击删除按钮时,它会在下面留下"添加字段"按钮,我希望它可以向上移动到如上所示的行中.

HTML:

<form action="javascript:void(0);" method="POST" autocomplete="off">
    <input type="submit" value="Submit">
    <br>
    <br>
    <div class="bigjane">
        <button class="add">Add Field</button><input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>
    </div>
</form>

jQuery的:

jQuery(document).ready(function () {
'use strict';
var input = 1,
    button = ("<button class='add'>Add Field</button>");

$('.add').click(function () {
    $(this).clone(true).appendTo('form');
    $(this).remove();
    $('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input1">');
    $('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input2">');
    $('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" …

因此，我尝试为我的单页应用程序创建一个导航，该导航将平滑地向下滚动到页面的部分。

我希望在页面顶部设置带有链接的导航，当用户单击这些链接时，会将它们平滑地向下滚动到页面的部分。我也希望这样，例如，如果用户直接转到链接website.com/about，它将平滑滚动到该部分，就像单击about导航组件一样。

我了解react-router-dom路由页面的工作原理，但我对如何使其用于此特定目的感到困惑。

这可以通过HashRouter实现吗？

这是我目前拥有的代码：

function Header() {
  return (
    <>
      <Link to="/">Hero</Link>
      <Link to="/">About</Link>
      <Link to="/">Contact</Link>
    </>
  );
}

function Hero() {
  return (
    <section>
      <h1>Hero Section</h1>
    </section>
  );
}

function About() {
  return (
    <section>
      <h1>About Section</h1>
    </section>
  );
}

function Contact() {
  return (
    <section>
      <h1>Contact Section</h1>
    </section>
  );
}

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Hero />
        <About />
        <Contact /> …

所以我有一些我想循环的数据：

const data = {
  names: [
    {
      name: "Jordan"
      // additional data
    },
    {
      name: "Holly"
      // additional data
    },
    {
      name: "Sean"
      // additional data
    }
  ]
};

使用useState钩子，我从索引 0 开始我的数据：

const [index, setIndex] = useState(data.names[0]);

如何使用状态循环遍历数组中的对象？我创建了一个调用 的按钮，handleClick我如何通过数组 +1？

function App() {
  const [index, setIndex] = useState(data.names[0]);

  function handleClick() {
    setIndex(); // Help!
  }

  return (
    <div className="App">
      <h1>{index.name}</h1>
      <button onClick={handleClick}>Change name</button>
    </div>
  );
}

代码沙盒