如何使用React创建具有条件可编辑输入/单元格的表？

问题描述

我有一个这样的表：

当用户单击编辑按钮时，< input> 应该会出现在其位置。

When a user clicks on an Edit button, an <input> should appear in its place.

如果用户单击另一个 Edit 按钮，该按钮也将替换为< ; input> ，而以前的< input> 应该消失并显示 Edit 再次按下按钮。

If a user clicks on another Edit button, this one will also be replaced with an <input>, and the previous <input> should disappear and show an Edit button again.

简而言之，一次只能有一个字段处于编辑模式。

In short, only one field can be in edit mode at a time.

这是我最初的状态：

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 方法：

<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> 不会消失。

The issue is that when I click on an Edit button, the <input> appears, but when I click another Edit button, the previous <input> does not disappear.

推荐答案

使用单个最初设置为 editableField 属性的情况如何？ null ？

What about using a single editableField property that is initially set to null?

然后，当您单击编辑按钮，将 editableField 设置为该字段的名称，然后在 render 内检查每个字段是否 editableField 是否匹配其名称，以呈现 Edit 按钮或输入字段。

Then, when you click on an Edit button, you set editableField to the name of that field, and inside render you check, for each field, whether editableField matches its name or not to render an Edit button or an input field.

类似这样的东西：

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>

这篇关于如何使用React创建具有条件可编辑输入/单元格的表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！