为什么单击单选按钮后按钮启用条件不起作用？

Question

当我尝试启用删除按钮时，尽管我为此添加了逻辑，但它不起作用。实际上，在添加以下删除按钮后，删除按钮始终处于启用状态。找不到问题。这是代码：

运动.js

// initiallising states

const [items1, setItems1] = useState({

pageCount: '',

field_names_state: [],

toggle: false,

elements: [],

data_form: [],

sports_id: '',

buttonDisable: "0",

}); 

const onRadioChange = (e) => {

items1.sports_id = e.target.value;

items1.buttonDisable="1";

alert(items1.buttonDisable);

};

// mapping our fetched data and send them to Table_Sports.js

const data1 = items1.elements.map((item) => (

<Table_Sports key={item.sports_id} item={item} action={onRadioChange} />

));

<button type='button' disabled={items1.buttonDisable=="1"} onClick={(e) => handleDelete(e)}>

    Delete

</button>

Table_Sports.js

  <td>

    <input

      type='radio'

      // defaultValue={props.item.sports_id}

      defaultValue={props.}

      name='sports_id'

      onClick={(e) => props.action(e)}

    />

  </td>

  <td>

    <input

      type='text'

      defaultValue={props.item.sports_name}

      name='sports_name'

      contentEditable='true'

    />

  </td>

Answer 1

要更改状态的值，您应该调用 setItems1，将新的状态对象作为参数传递，而不是直接操作它的属性。如果您像这样更改 onRadioChange 函数，它应该可以工作：

const onRadioChange = (e) => {

    setItems1({

        ...items1,

        sports_id: e.target.value,

        buttonDisable: "1",

    });

};