如何在reactjs中提交时放入一个数组?

时间:2018-12-17 10:13:45

标签: javascript reactjs

我是reactjs的新手,正在尝试实现简单的todo应用。但是,提交后,我无法将其压入数组,即状态变量。

以下是我的代码:

import React, { Component } from 'react';


class ToDo extends Component{

constructor(props){
    super(props)
    this.state={list:['hello'],item:''}
    this.handleSubmit=this.handleSubmit.bind(this)
    this.handleSearchChange=this.handleSearchChange.bind(this)
}
handleSubmit(e){
    e.preventDefault();
    this.setState(state=>({list:(state.list.push(this.state.item))}))

}
handleSearchChange(e){
    this.setState({item:e.target.value})
}

render(){
    console.log('state:',this.state.list)
    let listing=this.state.list.map((item)=><li key={item}>{item}</li>)
    return(
            <div >
                <form onSubmit={this.handleSubmit}>
                    <div className="form-group">
                    <label>
                    <input className="form-control "type="text" value={this.state.item} onChange={this.handleSearchChange} />
                    </label>
                    <label>
                    <input type="submit" value="Submit" className="form-control" />
                    </label>
                    </div>
                </form>
                <ul>{listing}</ul>
            </div>

        )
}
}

export default ToDo;

当我尝试单击“提交”时,它会重定向到错误。 帮助将不胜感激。 谢谢。

2 个答案:

答案 0 :(得分:1)

尝试一下:

handleSubmit(e){
        const { list, item } = this.state
        e.preventDefault();
        this.setState({ list: [...list, item] })
}

说明:您无法对数据进行突变,而是将其连接起来。 建议:始终使用es6函数,因此永远不需要绑定。

答案 1 :(得分:0)

对您来说很容易而且很有帮助...

function get_string_between($string, $start, $end){
    $string = ' ' . $string;
    $ini = strpos($string, $start);
    if ($ini == 0) return '';
    $ini += strlen($start);
    $len = strpos($string, $end, $ini) - $ini;
    return substr($string, $ini, $len);
}

$fullstring = 'this is my [tag]dog[/tag]';
$parsed = get_string_between($fullstring, '[tag]', '[/tag]');

echo $parsed; // (result = dog)