标签: controlled-component

我正在尝试从导航栏中的链接控制轮播。我现在拥有的是 HomePage 组件（NavBar 和 Carousel 的父组件）中的 click 方法，它根据在 NavBar 中单击的链接更新当前选定索引的状态。我对如何让 Carousel 收听索引状态并在按下 Link 后移动幻灯片的方法一无所知。当我最初设置 activeIndex 时，我无法让它正确收听作为道具传递的索引，并且 onSelect 处理程序也基本上什么都不做。

更新：HomePage => 刚刚向状态添加了方向以反映下面轮播中更新 v2 的变化。

class HomePage extends Component {
    constructor(props){
        super(props);
        this.state = {index: '0', direction: null};
    }

    handleclick = (i) => {
        this.setState({direction: (this.state.index>i) ? 'prev':'next', index: i});
    }

    render() {
        return (
            <Container className='containerCustom d-flex h-100 w-100' fluid>
                <Row className='fullscreen-bg h-100 w-100'>
                    <video loop autoPlay className='fullscreen-bg_video w-100 h-100'>   
                        <source src={background} type='video/mp4'/>
                    </video>
                </Row>
                <Row className='flex-fill w-100 navrow' noGutters>
                    <Col …

我试图捕捉用户停止输入受控输入的那一刻。它在不受控制的组件内部发生得很顺利。

当我尝试使用 时setTimeout，只有最后一个字符作为输入，其余的都没有输入。我不确定为什么会发生

import React, { Component } from "react";
import ReactDOM from "react-dom";
import {connect} from 'react-redux';

import "./styles.css";

class Main extends Component{
  state={}

  timeout = null;

  onChange = e => {
    this.props.handleInputChange(e.target.value);
  }

  render(){
    return (
      <div className="Main">
        <input type='text' value={this.props.val} onChange={this.onChange}/>
      </div>
    );
  }
}

const mapStateToProps = state => {
  val: state.reducer.val
}

const mapDispatchToProps = dispatch => {
  handleInputChange: (val)=>dispatch(reducer.changeInput(val))
}

connect(mapStateToProps,mapDispatchToProps)(Main);

当用户停止输入时，它应该调度changeInput动作

在 React 应用程序中，您应该控制<select>. 只需一个选择就可以非常简单：

const ExampleSelect = () => {
  const [value, setValue] = React.useState()
  return (
    <select
      value={value}
      onChange={(e) => setValue(e.currentTarget.value)}
    >
      <option value='foo'>Foo</option>
      <option value='bar'>Bar</option>
      <option value='baz'>Baz</option>
    </select>
  )
}

但是当你将multipleprop 添加到 a 中时<select>，事情就会变得奇怪。传递给onChange它的函数会迭代选项并根据哪些选项采取行动，这些选项似乎option.selected === true只在桌面上工作——在 iOS 上的 Safari 中，选择multiple === true似乎无法控制。

我觉得这是一个非常基本的问题，但我找不到任何相关内容。我不想安装带有预样式组件的整个库，只是为了能够在<select>React 应用程序内部选择多个选项。

以下是我尝试过的一些 onChange 函数：

type Setter = React.Dispatch<React.SetStateAction<string[] | undefined>>
type SelectChange = React.ChangeEvent<HTMLSelectElement>

export const handleMultiSelectChange = <S extends Function …

在输入字段中输入颜色名称后，当我提交表单时，出现错误：

TypeError：无法读取未定义（匿名函数）的属性“toLowerCase”C：/Users/HP/Documents/WDB/React/Practice/colors-app/src/NewPaletteForm.js:117

  114 |     //to check -> is 'palette name' unique
  115 |     ValidatorForm.addValidationRule("isPaletteNameUnique", value => {
  116 |         return palettes.every(
> 117 |             ({ paletteName }) => paletteName.toLowerCase() !== value.toLowerCase()
  118 | ^       );
  119 |     });
  120 | })

App.js ：（基于类的组件）

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { palettes: seedColors };
    this.findPalette = this.findPalette.bind(this);
    this.savePalette = this.savePalette.bind(this);
  }
savePalette(newPalette) {
    this.setState({ palettes: [...this.state.palettes, newPalette] });
  }

  render() {
    return (
      <Switch>
        <Route
          exact …

我有这个代码用于输入 type="password"

<input
  type="password"
  id="password"
  value={form.password}
  onChange={handlePasswordChange}
/>

它有效，但我注意到，在开发者控制台“Elements”中，您实际上可以看到密码字段的值：

<input type="password" class="form-control undefined" value="qwerty">

这样显示密码可以吗？有办法隐藏它吗？我应该使用非受控组件而不是受控组件吗？

我有一个页面，我从服务器获取数据并为受控输入设置状态值。（例如，我有拥有的输入值this.state.name，我从服务器例如戴夫取名字，并将其设置在状态的名称，所以输入的值是戴夫。它的工作原理，但我与对象数组有问题

所以这就是状态

this.state = {
        ingredients: [{ ingredient: "", quantity: '' }],
        //other properties
   }

这就是我如何使用 ingredients

{this.state.ingredients.map(({ ingredient, quantity }, index) => (


   <div key={index}>
        ingredient: <input value={ingredient} className="ingredientClass" type="text" autoComplete="off" placeholder="e.g: pepper" onChange={{e => this.update(index, "ingredient", e.target.value)} />
        quantity: <input value={quantity} autoComplete="off" type="text" placeholder="e.g: 1g" onChange={e => this.update(index, "quantity", e.target.value)} />
        <button onClick={this.BtnClick}>delete</button> <br />
       {this.state.errorFor === 'ingredientsfield' ? this.state.errmsg : null}
   </div>
))}

但这会导致此错误：

警告：组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控制（反之亦然）。决定在组件的生命周期内使用受控或非受控输入元素。更多信息：link

为什么会这样？我该如何解决？

PS：我检查并成功从服务器获取成分

更新：onChange 事件的代码

update(index, key, value) {
    this.setState(({ …