Question

好的，问题很简单，但很难解释。

我正在制作一个InputGenerator组件，它会生成一个输入列表。

每个生成的输入都有一个相应的＆＃34;删除＆＃34;旁边的按钮。这两个元素（输入和按钮）包含在map函数内的div中。 div有一个独特的关键道具。它看起来像这样（这是整个组件的jsx）：

        <div style={[InputGenerator.style.wrapper]}>
            <div className="container" style={InputGenerator.style.container}>
                {this.state.inputs.map((input, idx) => {
                    return (
                        <div key={idx} style={[
                            InputGenerator.style.row,
                            InputGenerator.count > 1 && idx > 0 ? InputGenerator.style.input.pushTop : {},
                        ]}>
                            <InputText
                                id={input.id}
                                name={input.name}
                                placeholder={input.placeholder}
                                style={input.style}
                            />
                            <Button
                                style={InputGenerator.style.remove}
                                type={Button.TYPES.BASIC}
                                icon="ion-close-round"
                                onClick={this.remove.bind(this, input.id)}
                            />
                        </div>
                    );
                })}
            </div>

            <div className="controls" style={InputGenerator.style.controls}>
                <Button icon="ion-plus" type={Button.TYPES.PRIMARY} title="Add ingredient" onClick={this.add.bind(this)}/>
            </div>
        </div>

正如您所看到的，所有输入都保存在this.state对象中，每个输入都有一个唯一的ID。

以下是添加和删除方法：

添加（）：

add() {
    InputGenerator.count++;

    const newInput = {
        id: this.id,
        name: this.props.name,
        placeholder: this.props.placeholder,
        style: this.style,
        value: '',
    };

    const inputs = this.state.inputs;

    inputs.push(newInput);

    this.setState({ inputs });
}

删除（）：

remove(id) {
    this.setState({
        inputs: this.state.inputs.filter(i => i.id !== id),
    });
}

问题是：

我生成三个输入（使用添加按钮）
我在输入中放置了随机值（例如：1,2,3）
我点击删除按钮，对应第一个元素（值为1）
结果：两个输入项目，值为1和2
预期：两个输入项目，值为2和3
问题：我建议包装div的关键支柱不足以跟踪输入的值。

所以，我开放的想法和建议如何继续。

这是一个孤立的沙箱，可以玩我的组件并查看＆＃34; bug＆＃34;在实践中：https://codesandbox.io/s/5985AKxRB

提前致谢！：）

Answer 1

您遇到的问题是因为您没有正确处理状态。更改输入值时需要更新状态。

  handleChange(index,event) {
    let inputs = this.state.inputs;
    inputs[index].value = event.target.value;
    this.setState({inputs:inputs})
  }

DEMO：DEMO

以下是更新后的代码：

import React, { Component } from 'react';
    import { render } from 'react-dom';
    import Hello from './Hello';

    const styles = {
      fontFamily: 'sans-serif',
      textAlign: 'center',
    };

    const App = () =>
      <div style={styles}>
        <InputGenerator />
      </div>;

    class InputGenerator extends Component {
      constructor() {
        super();
        this.state = {
          inputs: [],
        };
      }
      componentWillMount() {
        this.add();
      }
      handleChange(index,event) {
        let inputs = this.state.inputs;
        inputs[index].value = event.target.value;
        this.setState({inputs:inputs})
      }
      add() {
        InputGenerator.count++;

        const newInput = {
          id: this.id,
          name: this.props.name,
          placeholder: this.props.placeholder,
          style: this.style,
          value: '',
        };

        const inputs = this.state.inputs;

        inputs.push(newInput);

        this.setState({ inputs });
      }
      get id() {
        if (this.props.id) {
          return `${this.props.id}-${InputGenerator.count}`;
        }

        return `InputGeneratorItem-${InputGenerator.count}`;
      }
      get style() {
        return [];
      }
      remove(id) {

        var state = this.state;
        state.inputs = state.inputs.filter(i => i.id !== id);
        this.setState({
          inputs: state.inputs
        });
      }
      render() {
        return (
          <div>
            <div className="container">
              {this.state.inputs.map((input, idx) => {
                return (
                  <div key={idx}>
                    <input
                      id={input.id}
                      name={input.name}
                      value = {input.value}
                      onChange={this.handleChange.bind(this,idx)}
                      placeholder={input.placeholder}
                    />
                    <button onClick={this.remove.bind(this, input.id)}>
                      Remove
                    </button>
                  </div>
                );
              })}
            </div>

            <div className="controls">
              <button onClick={this.add.bind(this)}>Add</button>
            </div>
          </div>
        );
      }
    }

    InputGenerator.count = 0;

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

删除输入会导致值不正确

1 个答案: