Блог

Я пишу небольшое приложение для редактирования информации пользователем, когда отключенный ввод == false, ввод открыт, и пользователь может записывать информацию, а если отключено == true, значение на входе является значением по умолчанию (значение до редактирования пользователем). Мое приложение выглядит так.

 const List = (props) => (
  <div className="list">
    { props.data.length > 0 amp;amp; props.data.map((item,index) =>
      <div style={{ marginTop: '10px'}}>
        <input 
          type="text" 
          defaultValue={item.text}
          disabled={props.copyData[index]}
        />
        <button onClick={() => props.toggle(index)}> Click to toggle 
        </button>
      </div>
    )}        
  </div>
);

class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
         data: [
           {text: 'Some text 1'},
           {text: 'Some text 2'},
           {text: 'Some text 3'},
         ],
        copyData: [false,false,false]
     };
   }


   toggle = (index) => {
     let temp = this.state.copyData.slice();
     temp[index] = temp[index] ? false : true;
     this.setState({ copyData: temp });
   }

   render() {
     const { data, copyData } = this.state;
     return(
       <div className="App">
         <List data={data} copyData={copyData} toggle={this.toggle} />
       </div>
     );

   }
  }
  

Извините за мой плохой английский, спасибо за вашу помощь.

 defaultValue={props.copyData[index] ? item.text || ''}