代码之家 › 专栏 › 技术社区 › Joliet

通过state.value.js将textarea值复制到新组件

reactjs javascript

Joliet · 技术社区 · 6 年前

我还没反应过来。。。因此,我很难将用户在textarea中输入的字符串复制到新组件中:如果不创建另一个组件,我可以保持该值 Card 但是当我创建一个新的 卡片 组件,它应该是空的,值也被捕获在那里。不过,我已经尝试通过state跟踪值和以前的内容 setState() 不将新值更新为空字符串。

import React, { Component } from 'react';
import './style.css';

const list = [
  {
    id : 0,
    title : "Went well",
    showCard : false,
    addCard : (func0,func1,func2,func3,func4,color,value)=> {
      let id = "x"+count++
      let myProps = {id:id,deleteCard:func0,handleChange:func1,moveRight:func2,moveLeft:func3,setText:func4,key:id,color:color,value:value}
      return <Card {...myProps}/>},
    cards : [],
    color : "pink"
  },
  {
    id : 1,
    title : "To Improve",
    showCard : false,
    addCard : (func0,func1,func2,func3,func4,color,value)=> {
      let id = "y"+count++
      let myProps = {id:id,deleteCard:func0,handleChange:func1,moveRight:func2,moveLeft:func3,setText:func4,key:id,color:color,value:value}
      return <Card {...myProps}/>},
    cards : [],
    color : "yellow"
  },
  {
    id : 2,
    title : "Action Items",
    showCard : false,
    addCard : (func0,func1,func2,func3,func4,color,value)=> {
      let id = "z"+count++
      let myProps = {id:id,deleteCard:func0,handleChange:func1,moveRight:func2,moveLeft:func3,setText:func4,key:id,color:color,value:value}
      return <Card {...myProps}/>},
    cards : [],
    color : "blue"
  }
]

let count = 0

class App extends Component {
  constructor(){
    super()
    this.state = {list : list, value: "", current: "",}
    this.buttonClick = this.buttonClick.bind(this)
    this.deleteCard = this.deleteCard.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.moveRight = this.moveRight.bind(this)
    this.moveLeft = this.moveLeft.bind(this)
    this.setText = this.setText.bind(this)
  }

  buttonClick(ev,id,func0,func1,func2,func3,func4){
    let a0 = null
    this.setState({current:""})
    for(let obj of this.state.list){
      if(obj.id === id){ 
        console.log("here af")
        a0 = obj.addCard(func0,func1,func2,func3,func4,obj.color,this.state.value)
        obj.cards.push(a0)
      }

    }

    this.setState({list:this.state.list})
  }

  moveLeft(ev,id,func0,func1,func2,func3,func4){
    ev.preventDefault()
    let a0 = null

    if(this.state.value === this.state.current) this.setState({value:this.state.current})

    let updatedList = this.state.list.map((obj)=>{
      let found = obj.cards.findIndex((element)=> element.key === id)

      if(obj.id === 0){
         if(found !== -1){
          obj.cards.splice(found,1)
          a0 = this.state.list[2].addCard(func0,func1,func2,func3,func4,this.state.list[2].color,this.state.value)
          this.state.list[2].cards.push(a0)     
        }
      }

      if(obj.id === 1){
        if(found !== -1){
          obj.cards.splice(found,1)
          a0 = this.state.list[0].addCard(func0,func1,func2,func3,func4,this.state.list[0].color,this.state.value)
          this.state.list[0].cards.push(a0)     
        }
      }

      if(obj.id === 2){
        if(found !== -1){
          obj.cards.splice(found,1)
          a0 = this.state.list[1].addCard(func0,func1,func2,func3,func4,this.state.list[1].color,this.state.value)
          this.state.list[1].cards.push(a0)    
        }
      }

      return obj
    })

    this.setState({list:updatedList,})
  }

  moveRight(ev,id,func0,func1,func2,func3,func4){
    ev.preventDefault()
    let a0 = null

    let updatedList = this.state.list.map((obj)=>{
      let found = obj.cards.findIndex((element)=> element.key === id)

      if(obj.id === 0){
        if(found !== -1){
          obj.cards.splice(found,1)
          a0 = this.state.list[1].addCard(func0,func1,func2,func3,func4,this.state.list[1].color,this.state.value)
          this.state.list[1].cards.push(a0)     
        }
      }

      if(obj.id === 1){
        if(found !== -1){
          obj.cards.splice(found,1)
          a0 = this.state.list[2].addCard(func0,func1,func2,func3,func4,this.state.list[2].color,this.state.value)
          this.state.list[2].cards.push(a0)     
        }
      }

      if(obj.id === 2){
        if(found !== -1){
          obj.cards.splice(found,1)
          a0 = this.state.list[0].addCard(func0,func1,func2,func3,func4,this.state.list[0].color,this.state.value)
          this.state.list[0].cards.push(a0)    
        }
      }

      return obj
    })
    this.setState({list:updatedList,})
  }

  setText(ev){
    this.setState({value:ev.target.value,current:ev.target.value})
  }

  deleteCard(ev,id){
    ev.preventDefault()
    let updatedList = this.state.list.map((obj)=>{
      let found = obj.cards.findIndex((element)=> element.key === id)
      if(found !== -1)
        obj.cards.splice(found,1)
      return obj
    })
    this.setState({list:updatedList})
  }

  handleChange(ev){
    this.setState({value:ev.target.value,current:ev.target.value})
  }

  render() {
    return (
      <div className="App">
        <h2>Retro Board</h2>
          <ul className="container">
            {this.state.list.map((item) =>
                <Contak key={item.title+item.id} text={item.title} buttonClick={this.buttonClick} deleteCard={this.deleteCard} handleChange={this.handleChange} moveRight={this.moveRight} moveLeft={this.moveLeft} setText={this.setText} showCard={item.showCard} id={item.id} cards={item.cards} />
            )}
         </ul>
      </div>
    )
  }
}

function Contak(props){
  return <li>
          <h3>{props.text}</h3>
          <ul className="stack">
            <li><button id={props.text} type="button" className="block" onClick={e =>props.buttonClick(e,props.id,props.deleteCard,props.handleChange,props.moveRight,props.moveLeft,props.setText)}>+</button></li>
            {props.cards.map((card)=> {
              console.log("card",card)
              return card || null
              })}
          </ul>
          </li>
}

function Card(props){
  return <li>
          <div className="card" style={{backgroundColor: props.color}}>
            <textarea type="text" className="card" placeholder="Enter text here" defaultValue={props.value} onChange={e =>props.handleChange(e)} onBlur={e => props.setText(e)}></textarea>
            <div><a className="ltCtl" href="./logo" onClick={e=>props.moveLeft(e,props.id,props.deleteCard,props.handleChange,props.moveRight,props.moveLeft,props.setText)}>&lt;</a><a className="clCtl" href="./logo" onClick={e =>props.deleteCard(e,props.id)}>x</a><a className="rtCtl" href="./logo" onClick={e =>props.moveRight(e,props.id,props.deleteCard,props.handleChange,props.moveRight,props.moveLeft,props.setText)}>&gt;</a></div>
          </div>
         </li>
}

export default App;

J。

2 回复 | 直到 6 年前

nbwoodward 6 年前

你的设置状态没有被触发,因为你没有使用 onChange

handleChange(ev){
   this.setState({value:ev.target.value,current:ev.target.value})
 }
...
<textarea type="text" onChange={e =>props.handleChange.bind(this)}></textarea>

.bind(this) 在 handleChange 告诉 onChange公司 在触发事件时运行该函数。如果你真的像在上面的代码中那样调用函数 onChange={e =>props.handleChange(e)}

function foo(){
    return 5
}

var bar_now = foo() //the way you have set it up, but not what you want.
  >> 5

var bar_later = foo //the way you want it set up
  >> foo
bar_later() //when you evaluate bar_later() it calls foo()
  >> 5

Erwan A. R. Riou 6 年前

我不知道我是否完全理解它,但如果通过任何更改,你想导入一些属性到你的卡组件,我100%确定,你需要定义一个键值这个道具导入。

例如:

return <Card myKeyProps={myProps.id}/>

另外,react的最佳实践之一是将每个组件分离到一个js文件中。因为每个组件都有一个特定的功能,并且您可以分别理解每个文件的用途,所以它使阅读变得更加容易。