Question

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

观察：我发现，疯狂的事情是，如果我将密钥从key={index}更改为key={variable.value}，这毫无用处。

有人可以告诉我我做错了什么，还是有什么办法可以做得更好？

，将会更好地理解

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);

Input.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

我分叉了您的沙盒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发送道具，但没有正确处理更新。您只需执行一次，因为componentDidMount在加载组件时仅运行一次。我简化了，我只是把道具传下来。这样可以很好地进行过滤。

请记住，如果要在编辑输入后正确保存值，则必须在状态dummyVariablies内插入App，然后在您的计算机上使用lifting state up输入组件。可以找到很好的例子here。

搜索然后修改结果输入

1 个答案: