如何使用 React 創建帶有條件可編輯輸入/單元格的表格？

Question

我有一張這樣的表：

當用戶點擊一個Edit按鈕時，一個<input>應該出現在它的位置。

如果用戶點擊另一個Edit按鈕，這個按鈕也將被替換為<input> ，並且之前的<input>應該消失並再次顯示一個Edit按鈕。

簡而言之，一次只能有一個字段處於編輯模式。

這是我的初始state ：

state = {
    editnameEnable: false,
    editemailEnable: false,
    editaddressEnable: false,
    edittelephone_noEnable: false,
}

這是我的edit()方法：

edit = value => {
    var address_element = ['name','address','email','telephone_no']; 
    address_element = address_element.filter(element => element !== value); 
    address_element.map( val => this.setState({[`edit${val}Enable`]: false}));

    this.setState({[`edit${value}Enable`]: true}, ()=>{
        console.log(this.state);
    });
}

這是我的render方法中 JSX 的一部分：

<td>{
    this.state[`edit${this.props.item}Enable`] ? ( <input type="text"/> ) : (
        <span
            className="edit"
            onClick={ () => this.edit(this.props.item) }>Edit</span>
    )
}</td>

問題是當我點擊一個Edit按鈕時， <input>出現，但是當我點擊另一個Edit按鈕時，之前的<input>不會消失。

Answer 1

使用最初設置為null的單個editableField屬性怎么樣？

然后，當您單擊“ Edit按鈕時，將editableField設置為該字段的名稱，並在render內部檢查每個字段的editableField是否與其名稱匹配以呈現“ Edit按鈕或輸入字段。

像這樣的東西：

 class FieldCell extends React.Component { constructor(props) { super(props); } focusField = (element) => element && element.focus(); render() { const editElement = this.props.isEditable ? ( <input type="text" ref={ this.focusField }/> ) : ( <button onClick={ () => this.props.onEdit() }>EDIT</button> ); return (<td className="textLeft">{ editElement }</td>); } } class UserData extends React.Component { constructor(props) { super(props); this.state = { editableField: null, }; } render() { const editableField = this.state.editableField; const rows = ['Name', 'Address', 'Telephone No.', 'E-Mail'].map((field) => { const isEditable = field === editableField; return ( <tr key={ field }> <td>{ field }</td> <FieldCell isEditable={ isEditable } onEdit={ () => this.setState({ editableField: field })}></FieldCell> </tr> ); }); return (<table>{ rows }</table>); } } ReactDOM.render(<UserData />, document.getElementById('app'));

 body { font-family: monospace; font-size: 13px; } table { border: 2px solid #000; border-collapse: collapse; text-align: right; width: 100%; } td { border: 2px solid #000; padding: 4px; width: 50%; overflow: hidden; } .textLeft { text-align: left; user-select: none; } button, input { border: 2px solid black; padding: 4px 8px; margin: 0; font-family: monospace; font-size: 13px; box-sizing: border-box; background: none; outline: none; } button:hover, button:focus, input:hover, input:focus { border-color: blue; color: blue; } button { font-weight: bold; } input { width: 50%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>