Question

我为用户编辑信息编写了一个小应用程序，当禁用的输入==否，输入打开并且用户可以编写信息时，如果禁用的== true，则输入中的值为默认值（用户编辑之前的值）。我的应用看起来像这样。

const List = (props) => (
  <div className="list">
    { props.data.length > 0 && 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>
     );

   }
  }

对不起，我的英语不好，谢谢您的帮助。

Answer 1

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

禁用输入为真时如何设置默认值

1 个答案: