class Demo extends React.Component{
constructor (){
super();
this.state = {
list : ['car','map', 'house']
}
}
inputValue(e){
var x = e.target.value;
console.log(x)
}
addValue(){
this.state.list.push();
this.setState({list: this.state.list});
}
render(){
return(
<div>
<input onChange={this.inputValue} type="text"/>
<ul>
{this.state.list.map(item => (
<li>{item}</li>
))}
</ul>
<button onClick={this.addValue.bind(this)}>Add Element</button>
</div>
)
}
}
ReactDOM.render(
<Demo/>,
document.getElementById('test')
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="test"></div>使用我的代码，我如何从推动的价值<input onChange={this.inputValue} type="text"/>在list : ['car','map', 'house']。我使用此addValue功能，但是我无法将frominputValue函数的x变量插入push()fromaddValue函数。如何使用我的代码做到这一点？
您需要一个state用于文本输入的值，以便您的addValue()函数在添加新项时知道要使用什么。文本state将使用用户键入的任何内容进行更新。
工作演示：https：//codesandbox.io/s/magical-feynman-fze1n
import React from "react";
class Demo extends React.Component {
constructor() {
super();
this.state = {
text: "",
list: ["car", "map", "house"]
};
}
inputValue(e) {
this.setState({
text: e.target.value
});
}
addValue() {
const text = this.state.text;
this.setState({ list: [...this.state.list, text] });
}
render() {
return (
<div>
<input onChange={this.inputValue.bind(this)} type="text" />
<ul>
{this.state.list.map(item => (
<li>{item}</li>
))}
</ul>
<button onClick={this.addValue.bind(this)}>Add Element</button>
</div>
);
}
}
export default Demo;
另外，请勿进行直接的状态更改，例如this.state.list.push(blah)。这违反了React原则，并可能导致不良的视觉副作用。如果您需要引用现有的state，请尝试创建一个副本。对于您列出的情况，我们使用spread-operator创建浅表副本，然后将新项目添加到数组中。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句