无法在React JS中有条件地更改已检查

Question

当用户单击其他给定选项时，我想更改已检查状态，我尝试使用条件语句有条件地执行此操作。但是当我单击单选按钮时，我没有改变。 我检查了状态，它的变化正确。但是选中状态保持不变，或者使每个按钮都没有选中。.

我尝试根据解决方案使用e.preventDefault（），但无法解决。

import React, { Component, Fragment } from 'react';
import { Button } from '@material-ui/core';

export class NewPostForm extends Component {
    constructor(){
        super();
        this.state = {
            post_type:''
        }
        this.onChange = this.onChange.bind(this);
    }

    onChange  = e => {
        this.setState({
        [e.target.name]:e.target.value
        })
    }
  render() {
      console.log(this.state.post_type);
    return (
      <Fragment>
          {/* First Radio Button */}
          <div className='row'>
            <div className='col-sm-12 text-center' style={{borderBottom:'1px solid black',borderTop:'1px solid black'}}>
                <ul style={{listStyleType:'none',padding:0,margin:0}}>
                    <li style={{display:'inline-block'}}>
                        <ul style={{listStyleType:'none',textAlign:'right',padding:0,margin:0}}>
                            <li className='py-2 px-1' style={{display:'inline-block',width:'123px'}}>Articles</li>
                            <li className='py-2 px-1' style={{display:'inline-block'}}><input type="radio"  name='post_type' value='articles' onChange={this.onChange} defaultChecked={(this.state.post_type)=== 'articles'} /></li>
                        </ul>
                    </li>
                    <li style={{display:'inline-block'}}>
                        <ul style={{listStyleType:'none',textAlign:'right',padding:0,margin:0}}>
                            <li className='py-2 px-1' style={{display:'inline-block',width:'123px'}}>Reports</li>
                            <li className='py-2 px-1' style={{display:'inline-block'}}><input type="radio" name='post_type' value='reports'  onChange={this.onChange} checked={(this.state.post_type) === 'reports'} /></li>
                        </ul>
                    </li>
                </ul>
            </div>
          </div>
          {/* First Radio Button*/}

          {/* Secong Radio Buttons */}
          <div className='row'>
            <div className='col-sm-12' style={{borderBottom:'1px solid black'}}>
                <ul style={{listStyleType:'none',padding:0,margin:0}}>
                    <li style={{display:'inline-block'}}>
                        <ul style={{listStyleType:'none',textAlign:'right',padding:0,margin:0}}>
                            <li className='py-2 px-1' style={{display:'inline-block',width:'123px'}}>Blogs Post</li>
                            <li className='py-2 px-1' style={{display:'inline-block'}}><input type="radio" name='post_type' value='blog_post'  onChange={this.onChange} checked={(this.state.post_type) === 'blog_post'}/></li>
                        </ul>
                    </li>
                    <li style={{display:'inline-block'}}>
                        <ul style={{listStyleType:'none',textAlign:'right',padding:0,margin:0}}>
                            <li className='py-2 px-1' style={{display:'inline-block',width:'123px'}}>Notice</li>
                            <li className='py-2 px-1' style={{display:'inline-block'}}><input type="radio" name='post_type' value='notice' onChange={this.onChange} checked={(this.state.post_type=== 'notice') ? true : false }  /></li>
                        </ul>
                    </li>
                </ul>
            </div>
          </div>
          {/* Second Radio Buttons */}

          {/* Third Radio Buttons */}
          <div className='row'>
            <div className='col-sm-12' style={{borderBottom:'1px solid black'}}>
                <ul style={{listStyleType:'none',padding:0,margin:0}}>
                    <li style={{display:'inline-block'}}>
                        <ul style={{listStyleType:'none',textAlign:'right',padding:0,margin:0}}>
                            <li className='py-2 px-1' style={{display:'inline-block',width:'123px'}}>Associate News</li>
                            <li className='py-2 px-1' style={{display:'inline-block'}}><input type="radio" name='post_type' value='associate_news'  onChange={this.onChange} checked={(this.state.post_type) == 'associate_news'}/></li>
                        </ul>
                    </li>
                    <li style={{display:'inline-block'}}>
                        <ul style={{listStyleType:'none',textAlign:'right',padding:0,margin:0}}>
                            <li className='py-2 px-1' style={{display:'inline-block',width:'123px'}}>Events</li>
                            <li className='py-2 px-1' style={{display:'inline-block'}}><input type="radio" name='post_type' value='event' onChange={this.onChange} checked={(this.state.post_type)=== 'event'}/></li>
                        </ul>
                    </li>
                </ul>
            </div>
          </div>
          {/* Third Radio buttons */}

          {/* Submit Next Buttons */}
          <Button variant='contained' color='primary'>Next</Button>
          {/* Submit Next Buttons */}
        </Fragment>
    )
  }
}

export default NewPostForm