代码之家 › 专栏 › 技术社区 › abu abu

react.js-使用JSX有条件地呈现和编辑输入

react-state-management conditional reactjs javascript

0

abu abu · 技术社区 · 6 年前

我有一张这样的桌子:

当用户单击一个 edit button时,一个 input> should appear in its place.

如果用户单击另一个 edit button,则此按钮也将替换为一个 input> ,而上一个 input> should消失并显示一个 edit button again.

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

这是我的初始状态


   
    
     
      
       
        
         
          
           
            
             
              状态={
editnameenable:错误,
editeEmailEnable:错误,
editAddressEnable:错误,
编辑电话:错误,
}
这是我的edit()method:。


edit=value=>。{
var address_element=['name'、'address'、'email'、'telephone_no'];
address_element.map(val=>this.setstate([`编辑$val启用`]:false));

this.setstate([`编辑$值启用`]:真,()=>。{
console.log(this.state);
(});
}
这是myrender中的JSX的一部分method:。

<td>。{
this.state[`edit$this.props.item启用`]?(<input type=“text”/>):(
<跨度
classname=“编辑”
onclick=()=>this.edit(this.props.item)>编辑</span>
)
}</td>
问题是,当我单击一个editbutton时,会出现input>,但当我单击另一个editbutton时,上一个input>不会消失。


当用户单击Edit按钮,一个<input>应该出现在它的位置上。

如果用户单击另一个编辑按钮,此按钮也将替换为<输入>和上一个<输入>应该消失并显示编辑再次按下按钮。

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

这是我的首字母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);
    });
}


这是我的JSX的一部分render方法:

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


问题是当我点击编辑按钮,按钮<输入>出现,但当我单击另一个编辑按钮,上一个<输入>不会消失。

1 回复 | 直到 6 年前

1

3

Danziger 6 年前

editableField null

Edit render

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>