javascript - 搜索然后修改结果输入

Question

目标:搜索必须正确运行，然后能够修改找到的输入。我试图弄清楚为什么我不能两者兼得。

观察:我发现的疯狂的事情是，如果我将 key 从 key={index} 更改，它就会起作用。至key={variable.value}这没有任何意义。

有人可以告诉我我做错了什么，或者是否有任何方法可以做得更好？

如果您查看codesandbox DEMO，您会更好地理解

index.js

import React from "react";
import ReactDOM from "react-dom";

import Input from './Input'

const dummyVariablies = [
  {
    name: 'barrack',
    value: 11
  },
  {
    name: 'putin',
    value: 22
  },
  {
    name: 'trump',
    value: 33
  }
]

class App extends React.Component {
  state = {
    search: ''
  }

  handleSearch = (e) => {
    this.setState({
      search: e.target.value
    })
  }

  getFilteredVariables = (variables) => {
    const { search } = this.state;
    return variables.filter(
      variable => variable.name.toString().toLowerCase().includes(search.toString().toLowerCase())
    );
  }

  render() {
    const variables = this.getFilteredVariables(dummyVariablies || [])
    return (
      <div>
        Goal: Search must work correctly and then be able to modify the found input
        <br /> <br /> <br />
        Search: <input onChange={this.handleSearch} />
        <br /> <br /> <br />
        {variables.map((variable, index) => {
          return <Input variable={variable} key={index}  />
        })
        }               
      </div>
    )
  }
}

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

输入.js

import React from 'react';

export default class Input extends React.Component {
  state = {
    name: '',
    value: ''
  }

  componentDidMount() {
    this.setState(
      {
        value: this.props.variable.value,
        name: this.props.variable.name
      }
    )
  }

  // static getDerivedStateFromProps(nextProps) {
  //   return {
  //     value: nextProps.variable.value,
  //     name: nextProps.variable.name
  //   }
  // }

  handleChange = (e) => {
    this.setState({ value: e.target.value });
  }

  render() {
    const { value, name } = this.state;
    return (
      <div>
        {name}
        <input type="text"
          value={value}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

Answer 1

我 fork 了你的沙箱 here

如你所见，我更改了输入:

import React from "react";

export default class Input extends React.Component {
  state = {
    value: this.props.variable.value
  };

  handleChange = e => {
    this.setState({ value: e.target.value });
  };

  render() {
    return (
      <div>
        {this.props.variable.name}
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

您的代码的问题是您正在向您的Input发送 Prop ，但您没有正确处理更新。您只需执行一次，因为 componentDidMount 在组件加载时仅运行一次。我简化了它，我只是将 Prop 传递下来。这样过滤效果就很好。

请记住，如果您想在编辑输入后正确保存值，则必须在 App 的状态中插入 dummyVariablies ，然后使用 从输入组件中提升状态。可以找到很好的例子here .