目标:搜索必须正确运行,然后能够修改找到的输入。我试图弄清楚为什么我不能两者兼得。
观察:我发现的疯狂的事情是,如果我将 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>
);
}
}
最佳答案
我 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 .
关于javascript - 搜索然后修改结果输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54827225/