按条件 React jsx 更改按钮标题

Question

笔记页面有一个按钮有停用功能，有一个注释 object (todo) 它有一个 is_active 属性的值为 False 或 True ，这个属性在点击时改变请告诉我如何做到这一点，以便在按下按钮时，铭文随值一起变化：“打开”：“关闭”，如何以及在何处正确写入条件。我找到了一个选项，但由于某种原因它不起作用。这是我的笔记代码：

const TodoItem = ({todo, deleteTODO}) => {
    // <div>if todo.is_active === 'True' ? button:'Open' : button:'Closed'</div>
    return (
        <tr>
            <td>{todo.id}</td>
            <td>{todo.name_project}</td>
            <td>{todo.text}</td>
            <td>{todo.date_create}</td>
            <td>{todo.date_update}</td>
            <td>{todo.creator}</td>
            {/*<td>{todo.is_active}</td>*/}
            <td>
                {todo.is_active === 'True' ?
                <button onClick={() => deleteTODO(todo.id)}  type='button'>Open </button>:
                <button onClick={() => deleteTODO(todo.id)}  type='button'>Closed </button>}
            </td>
        </tr>
    )
}

Answer 1

我假设您想根据 is_active 的布尔值更改按钮的文本，那么这就可以了。

<td>
  <button onClick={() => deleteTODO(todo.id)}>
    { todo.is_active ? "Open" : "Close" } 
  </button>
</td>

按条件 React jsx 更改按钮标题

Change button caption by condition React jsx

javascript

reactjs

django-rest-framework