다음 다른 구성 요소의 상태를 업데이트하고, 입력의 전체 행을 편집 반작용

Question

내가 가진 구성 요소, 다음과 같습니다 상태를 유지 CalcTime :

createTask은 다음과 같습니다

todos: [{name: 'firstmname', title: 'assistant', startTime: '0800', endTime: '1600'}, {name: 'secondname', title: 'boss', startTime: '0700', endTime: '1700'} etc...] 

:

createTask = ({title, start, end}) => { 
    this.state.todos.push({ 
     name, 
     title, 
     startTime, 
     endTime 
    }); 
    this.setState({ 
     todos: this.state.todos 
    }) 

구성 요소 CalcTimeItem에서 CalcTime에서 상태를 전달했으며 기본 편집 단추를 클릭 할 때 전체 입력 행을 렌더링하려고합니다. 그런 다음 각 입력 필드에 현재 값을 표시하고 변경 한 후 저장 버튼을 클릭하면 이러한 새 값을 CalcTime 상태로 전달하려고합니다.

CalcTime에 saveNewState 기능이 있어야하며 CalcTimeItem에 전달해야한다는 것을 알고 있습니다. 그러나 필자는 필자가 각 입력 필드를 렌더링 할 수있는 방법과 각 필드의 값을 saveNewState 기능과 연결하는 방법을 찾아 낼 수는 없습니다. 누구든지 전에 이것을 했습니까? 나는 맵핑을 시도하고, Object.keys (obj) .map()을 수행했지만,이 개념은 여전히 ​​나에게 너무 새로운 것이다.

편집 : 지금은 약의

renderEditInputs = (e) => { 
    let o = this.props.state[e]; 
    Object.keys(o).forEach(function(key){ 
     var value = o[key]; 
     console.log(value); 
    }) 
    } 

: 그것은 다음을 수행하여 개체 속성의 값을 CONSOLE.LOG에 도착 :

renderEditInputs = (e) => { 
    let o = this.props.state[e]; 
    let r = FUNCTION HERE 
    return(
     <div>{r}</div> 
    ); 
    } 
    renderTaskSection =() => { 
    const {title, start, end}= this.props; 
    if(this.state.isEditing){ 
     return(
     <div class="flex row"> 
      <form onSubmit={this.onSaveClick}> 
      {this.renderEditInputs(this.props.id)} 
      </form> 
     </div> 
    ) 
    } 
return (
     <div> 
     <button onClick={this.onEditClick}>Edit</button> 
     <button onClick={this.onDeleteClick}>Delete</button> 
     </div> 
    ) 
    } 
    render =() => { 
    return (
     <div class="flex row center" id={this.props.id}> 
     {this.renderTaskSection()} 
     {this.renderActionsSection()} 
     </div> 
    ) 
    } 

편집 2 : CalcTimeItem의 renderfunction은 다음과 같습니다 객체 당 소품을 렌더링하는 함수를 가져오고, 새 입력 값을 반입하고 상태를 업데이트하는 saveNewState 함수를 생성합니다.

EDIT3 : 이제 난 그냥 배열 "배열"로 입력을 추진하고있어 그래서

onEdit =() => { 
    console.log('testing onEdit functionality') 
    } 
renderEditInputs = (e) => { 
    let array = []; 
    let o = this.props.state[e]; 
    Object.keys(o).forEach(function(key){ 
     var value = o[key]; 
     console.log(value); 
     array.push(<input defaultValue={value} key={key} onChange={this.onEdit}></input>) 
    }) 
    return (array); 
    } 

한 다음 입력의 배열을 반환 :이 입력 작업을 얻었다. 그러나 onChange =} this.onEdit}이 작동하지 않으면 콘솔에서 다음 오류를 표시합니다. "Uncaught TypeError : undefined의 onEdit '속성을 읽을 수 없습니다. 이것은 당신이 다음 렌더링 할 수있는 잭 소품, 당신에게 CalcTimeItem 성분의 배열을 줄 것이다

var calcTimeItems = this.state.todos.map(function(todo) { 
    return (<CalcTimeItem todo={todo}/>); 
    }); 

: 내가 제대로 이해하면

Answer 1

당신이 뭔가를해야합니다.